Dashboard

<div class="w-full relative mb-16">
    <div class="relative h-[600px]">
        <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="max-w-7xl mx-auto px-4 sm:px-6 relative -mt-[300px]">
        <div class="rounded-sm bg-blue-light p-6 sm:p-10">
            <div class="flex items-center justify-between mb-10">
                <h1 class="text-3xl font-bold">My Benefits</h1>
                <div class="text-secondary"><i class="fas fa-gift fa-3x"></i></div>
            </div>

            <div class="mb-14">
                <div class="text-sm text-dark/50 border-t border-dark/10 pt-2 mb-6 uppercase">Pending changes</div>
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-x-16">
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-first-aid fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Private medical insurance</h4>
                            <div class="text-sm text-blue">Active from 1 Dec 2022</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-database fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Healthcare cash plan</h4>
                            <div class="text-sm text-blue">Active from 1 Mar 2022 - 28 Feb 2023</div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="mb-14">
                <div class="text-sm text-dark/50 border-t border-dark/10 pt-2 mb-6 uppercase">Enrolled</div>
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-x-16">
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-tooth fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Dental discounts</h4>
                            <div class="text-sm text-blue">Ongoing</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-phone-square-alt fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Kinetic Halo</h4>
                            <div class="text-sm text-blue">Active from 1 Jul 2021</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-hand-holding-heart fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Employee assistance programme</h4>
                            <div class="text-sm text-blue">Active from 1 Jul 2021</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-toolbox fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Group pension</h4>
                            <div class="text-sm text-blue">Active from 1 Mar 2021 - 30 Nov 2022</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-sun fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Life assurance</h4>
                            <div class="text-sm text-blue">Active from 1 Jul 2022</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-umbrella fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Income protection</h4>
                            <div class="text-sm text-blue">Active from 1 Mar 2021 - 30 Nov 2022</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-exclamation-circle fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Critical illness</h4>
                            <div class="text-sm text-blue">Active from 1 Mar 2022 - 28 Feb 2023</div>
                        </div>
                    </a>
                    <a href="#" class="w-full rounded-sm border border-dark/10 bg-light flex p-4 space-x-4 hover:bg-dark/2 focus:outline-none focus:ring-1 focus:ring-secondary">
                        <div class="text-secondary"><i class="fas fa-desktop fa-3x"></i></div>
                        <div class="flex-1">
                            <h4 class="text-lg font-bold">Home computer loan</h4>
                            <div class="text-sm text-blue">Active from 1 Dec 2021</div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="border-t border-dark/10 pt-14 flex flex-col sm:flex-row space-y-6 sm:space-y-0 sm:space-x-10">
                <a href="#" class="btn btn-dark">View full summary</a>
                <a href="#" class="btn-outline btn-dark">View all available benefits</a>
            </div>
        </div>

    </div>
</div>