

const Overview = () => {
    return(
        <>
            <div className="w-full h-screen flex flex-col items-center gap-8 pt-20">
                <div className="w-full flex items-center justify-center">
                    <p className="text-2xl text-(--text-main)">Overview</p>
                </div>

                <div className="w-10/12 h-50 flex items-center justify-evenly">
                    <div className="w-2/11 h-8/11 bg-cyan-400/10 flex flex-col justify-evenly rounded-xl p-5">
                        <p className="text-(--bg-maj) text-2xl font-extralight">
                            10
                        </p>
                        <p className="font-semibold italic text-xl text-(--bg-maj)">
                            Students
                        </p>
                    </div>
                    <div className="w-2/11 h-8/11 bg-cyan-400/10 flex flex-col justify-evenly rounded-xl p-5">
                        <p className="text-(--bg-maj) text-2xl font-extralight">
                            10
                        </p>
                        <p className="font-semibold italic text-xl text-(--bg-maj)">
                            Students
                        </p>
                    </div>
                    <div className="w-2/11 h-8/11 bg-cyan-400/10 flex flex-col justify-evenly rounded-xl p-5">
                        <p className="text-(--bg-maj) text-2xl font-extralight">
                            10
                        </p>
                        <p className="font-semibold italic text-xl text-(--bg-maj)">
                            Students
                        </p>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Overview