<template>
    <div>
        <div class="grid">
            <div class="flex relative justify-center text-xs">
                <img class="" src="/img/frame1.png" alt="">
                <p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Literacy</abbr>
                </p>
                <p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Comunication <br>& Language</abbr>
                </p>
                <p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0  text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Mathematics</abbr>
                </p>
                <p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Understanding <br> the World </abbr>
                </p>
                <p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Physical <br> Development </abbr>
                </p>
                <p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Expressive Arts<br> & Desgine </abbr>
                </p>
                <p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
                    Preschool, Social <br>& Emotional <br>Development</abbr>
                </p>
            </div>
        </div>
    </div>
</template>
<style>
    .literacy {
        top: 110px;
        transform: rotate(25deg);
    }
    .comunication {
    transform: rotate(80deg);
    /* left: 360px; */
    top: 170px;
}
.mathematics {
    transform: rotate(-50deg);
    top: 373px;
}
.world {
    transform: rotate(-10deg);
    top: 420px;
}
.physical {
    transform: rotate(44deg);
    top: 340px;
}
.expressive {
    transform: rotate(-90deg);
    top: 225px;
}
.preschool {
    transform: rotate(-35deg);
    top: 95px;
}
.border-radius{
    border-top-left-radius: 200px;
    height: 400px;
}
</style>