Company Dashboard

<div class="max-w-7xl sm:mx-auto -mx-4">
    <div class="border-b border-t">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex sm:inline-flex border-l border-r divide-x text-dark text-sm sm:text-lg relative">
                <a href="#" class="w-1/2 sm:w-auto px-4 sm:px-10 py-6 text-center underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-dark focus:z-10 font-bold bg-gradient-to-b from-gray-200">Company Dashboard</a>
                <a href="#" class="w-1/2 sm:w-auto px-4 sm:px-10 py-6 text-center underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-dark focus:z-10 ">My Dashboard</a>
            </div>
        </div>
    </div>
</div>
<div class="w-full relative">
    <div class="absolute w-full h-[75%] bg-primary/10"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 pt-20 relative">
        <div class="grid sm:grid-cols-2 gap-6">
            <h1 class="text-5xl sm:text-4xl lg:text-5xl font-bold text-secondary sm:mb-16 lg:max-w-md">Welcome Brett to Kinetic+</h1>
            <div class="row-span-2 flex flex-col justify-end">
                <div class="rounded flex flex-col overflow-hidden relative aspect-square sm:aspect-auto sm:h-full">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;2 800w, https://picsum.photos/640/480?random&#x3D;2 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;2">
                    </picture>
                    <div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
                    <div class="flex-1 flex flex-col justify-end p-6 sm:p-10 md:p-26 space-y-8 text-light relative">
                        <div class="">
                            <div class="text-lg">04/02/22</div>
                            <h3 class="text-3xl lg:text-4xl font-bold text-shadow-md mb-4">Staff communication</h3>
                            <a href="#" class="text-lg font-bold underline underline-offset-2 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-light">Read more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-col justify-between">
                <div class="rounded flex flex-col overflow-hidden relative aspect-[4/3] sm:aspect-[16/9]">
                    <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 class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
                    <div class="flex-1 flex flex-col justify-end p-6 sm:p-10 md:p-26 space-y-8 text-light relative">
                        <div class="">
                            <h3 class="text-3xl lg:text-4xl font-bold text-shadow-md mb-4">Health and wellbeing calendar</h3>
                            <a href="#" class="text-lg font-bold underline underline-offset-2 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-light">View the calendar</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-16 mt-16">

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-px bg-dark/10">
        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-green-light group-hover:bg-green-light/90 rounded-full w-24 h-24 flex justify-center items-center text-light">
                <i class="fas fa-newspaper fa-3x"></i>
            </div>
            <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Wellbeing news</div>
        </a>

        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-blue group-hover:bg-blue/90 rounded-full w-24 h-24 flex justify-center items-center text-light">
                <i class="fas fa-book-open fa-3x"></i>
            </div>
            <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Employee handbook</div>
        </a>

        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-secondary group-hover:bg-secondary/90 rounded-full w-24 h-24 flex justify-center items-center text-light">
                <i class="fas fa-file-alt fa-3x"></i>
            </div>
            <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Company documents</div>
        </a>

        <a href="#" class="flex flex-col justify-start text-center items-center space-y-4 bg-light p-10 group focus:outline-none focus:ring-0">
            <div class="bg-primary group-hover:bg-primary/90 rounded-full w-24 h-24 flex justify-center items-center text-light">
                <i class="fas fa-user-friends fa-3x"></i>
            </div>
            <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Contact HR</div>
        </a>
    </div>

    <div class="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;2 800w, https://picsum.photos/640/480?random&#x3D;2 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;2">
                </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 class="bg-green 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;3 800w, https://picsum.photos/640/480?random&#x3D;3 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;3">
                </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-green absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-green 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 class="bg-blue 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;4 800w, https://picsum.photos/640/480?random&#x3D;4 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;4">
                </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-blue absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-blue 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 class="bg-pink 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;5 800w, https://picsum.photos/640/480?random&#x3D;5 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;5">
                </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-pink absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-pink 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>

</div>