<template>
    <section class="container mx-auto px-4 xl:px-24 my-32">
        <div class="flex flex-col lg:flex-row place-content-between  gap-y-16">
            <a href="/educators">
                <div class="flex rotate1 rounded-xl place-items-center">
                <div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/teacherb.png" alt=""></div>
                <h1 class=" pl-8 text-2xl w-80">Teeny Beans for Educators & Teachers</h1>
            </div>
            </a>
            <a href="/administrators">
                <div class="flex rotate1 rounded-xl place-items-center">
                <div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/ownersb.png" alt=""></div>
                <h1 class=" pl-8 text-2xl w-80">Teeny Beans for Owners & Administrators</h1>
            </div>
            </a>
        </div>
    </section>
</template>
<style>
    .width {
        width: 200px;
    }

</style>