Infobox: PREVIEW

<div class="my-20 grid sm:grid-cols-2 gap-8 lg:gap-16">
    <div class="bg-secondary rounded flex flex-col overflow-hidden">
        <div class="flex-1 p-8 pt-9 sm:p-12 relative text-light">
            <div class="bg-light rounded-full w-24 h-24 border-4 border-secondary absolute top-1 right-4 sm:top-4 sm:right-10 flex justify-center items-center text-secondary scale-75 sm:scale-100">
                <i class="fas fa-check-square fa-3x"></i>
            </div>
            <h4 class="text-3xl font-bold mb-10 mr-20">My Tasks</h4>
            <div class="text-lg mr-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            <a href="#" class="btn btn-light mt-6">View all tasks</a>
        </div>
        <div class="flex flex-col divide-y divide-light/10 border-t border-light/10">
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Employee assistance programme</span>
                <i class="fas fa-arrow-right fa-lg"></i>
            </a>
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10" target="_blank" rel="noopener">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Complete the employee engagement survey</span>
                <i class="fas fa-arrow-right fa-lg -rotate-45"></i>
            </a>
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Another task</span>
                <i class="fas fa-arrow-right fa-lg"></i>
            </a>
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">More tasks for me</span>
                <i class="fas fa-arrow-right fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="bg-teal rounded flex flex-col overflow-hidden">
        <div class="flex-1 p-8 sm:p-12 relative text-light">
            <div class="bg-light rounded-full w-24 h-24 border-4 border-teal absolute top-1 sm:top-4 right-4 sm:right-10 flex justify-center items-center text-teal scale-75 sm:scale-100">
                <i class="fas fa-check-square fa-3x"></i>
            </div>
            <h4 class="text-3xl font-bold mb-10 mr-20">Claims & Policy</h4>
            <div class="text-lg mr-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
        <div class="p-8 pt-0 sm:p-12 sm:pt-0">
            <a href="#" class="link link-cta">Make a claim</a>
        </div>
    </div>
</div>

<div class="my-20 grid sm:grid-cols-2 gap-8 lg:gap-16">
    <div class="bg-teal rounded flex flex-col overflow-hidden">
        <div class="aspect-[16/9] sm:aspect-auto sm:h-[400px] relative">
            <picture class="">
                <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;1">
            </picture>
        </div>
        <div class="flex-1 p-8 pt-9 sm:p-12 relative text-light">
            <div class="bg-light rounded-full w-24 h-24 border-8 border-teal absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-teal scale-75 sm:scale-100">
                <i class="fas fa-heartbeat fa-3x"></i>
            </div>
            <h4 class="text-3xl font-bold mb-10 mr-20">Physical health</h4>
            <div class="text-lg mr-10">Your body is your temple. Here, you’ll find details on your medical and dental cover as well as other useful resources to help you to take care of your physical health.</div>
            <a href="#" class="btn btn-light mt-6">More about physical health</a>
        </div>
        <div class="flex flex-col divide-y divide-light/10 border-t border-light/10">
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Private health insurance</span>
                <i class="fas fa-arrow-right fa-lg"></i>
            </a>
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10" target="_blank" rel="noopener">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Dental discounts</span>
                <i class="fas fa-arrow-right fa-lg -rotate-45"></i>
            </a>
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic Clinic</span>
                <i class="fas fa-arrow-right fa-lg"></i>
            </a>
            <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
                <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic GP</span>
                <i class="fas fa-arrow-right fa-lg"></i>
            </a>
        </div>
    </div>
</div>