My 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 ">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 font-bold bg-gradient-to-b from-gray-200">My Dashboard</a>
            </div>
        </div>
    </div>
</div>
<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>

<div class="space-y-16">
    <!-- image right -->
    <div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
        <div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute right-0">
            <picture class="">
                <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
            </picture>
        </div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 flex justify-start">
            <div class="md:w-1/2 p-8 sm:p-16 space-y-8">
                <h3 class="text-4xl font-bold">Time to talk</h3>
                <div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
                </div>
                <a href="#" class="link link-lg">Find out more</a>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-16">
        <h3 class="text-3xl font-bold text-dark border-t border-dark/10 pt-6 my-10">Support for common issues</h3>
        <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
            <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
                <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                    </picture>
                </a>
                <div class="flex-1 p-8 space-y-4">
                    <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                    <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                    <a href="#" class="link">Find out more</a>
                </div>
            </div>
            <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
                <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                    </picture>
                </a>
                <div class="flex-1 p-8 space-y-4">
                    <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                    <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                    <a href="#" class="link">Find out more</a>
                </div>
            </div>
            <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
                <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                    </picture>
                </a>
                <div class="flex-1 p-8 space-y-4">
                    <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                    <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                    <a href="#" class="link">Find out more</a>
                </div>
            </div>
            <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
                <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                    </picture>
                </a>
                <div class="flex-1 p-8 space-y-4">
                    <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                    <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                    <a href="#" class="link">Find out more</a>
                </div>
            </div>
            <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
                <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                    </picture>
                </a>
                <div class="flex-1 p-8 space-y-4">
                    <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                    <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                    <a href="#" class="link">Find out more</a>
                </div>
            </div>
            <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
                <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                    </picture>
                </a>
                <div class="flex-1 p-8 space-y-4">
                    <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                    <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                    <a href="#" class="link">Find out more</a>
                </div>
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="bg-dark/5 border border-dark/10 p-4 sm:p-10">
            <div class="flex flex-col md:flex-row w-full">
                <div class="w-full md:w-1/2">
                    <h2 class="text-3xl font-bold mb-6 sm:mb-14 hidden md:block">My total rewards statement</h2>
                    <table class="w-full sm:text-xl mb-10">
                        <tbody class="border border-dark/20 divide-y divide-dark/20 bg-light">
                            <tr class="divide-x divide-dark/20">
                                <td class="flex items-center px-4 sm:px-6 py-4">
                                    <div class="w-4 h-4 mr-4 rounded-full bg-green-light"></div>
                                    <div class="flex-1">Remuneration</div>
                                </td>
                                <td class="tabular-nums font-bold text-right px-6 py-4 hidden md:table-cell">£34,000.00</td>
                            </tr>
                            <tr class="divide-x divide-dark/20">
                                <td class="flex items-center px-4 sm:px-6 py-4">
                                    <div class="w-4 h-4 mr-4 rounded-full bg-pink"></div>
                                    <div class="flex-1">Employee benefits</div>
                                </td>
                                <td class="tabular-nums font-bold text-right px-6 py-4 hidden md:table-cell">£1,924.83</td>
                            </tr>
                            <tr class="divide-x divide-dark/20">
                                <td class="flex items-center px-4 sm:px-6 py-4">
                                    <div class="w-4 h-4 mr-4 rounded-full bg-purple"></div>
                                    <div class="flex-1">Travel and transport</div>
                                </td>
                                <td class="tabular-nums font-bold text-right px-6 py-4 hidden md:table-cell">£4,288.00</td>
                            </tr>
                        </tbody>
                        <tfoot class=" hidden md:block">
                            <tr class="">
                                <td class=""></td>
                                <td class="tabular-nums font-bold text-right border border-t-0 border-dark/20 bg-light p-0">
                                    <div class="px-6 py-4 border-b-4 border-blue">£40,212.83</div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                    <a href="#" class="btn btn-dark">View full statement</a>
                </div>
                <div class="flex-1 md:pl-10 lg:pl-20 mb-10 md:mb-0 flex flex-col md:flex-row items-start md:items-center order-first md:order-last">
                    <h2 class="text-3xl font-bold mb-6 md:hidden">My total rewards statement</h2>
                    <div class="w-full" x-data="{
						labels: ['Remuneration', 'Employee benefits', 'Travel and transport'],
						values: [34000.00, 1924.83, 4288.00],
						init() {
							let chart = new App.Chart(this.$refs.canvas.getContext('2d'), {
								type: 'doughnut',
								data: {
									labels: this.labels,
									datasets: [{
										data: this.values,
										backgroundColor: ['rgb(11, 202, 143)', 'rgb(199, 62, 121)', 'rgb(105, 41, 196)'],
									}],
								},
								options: {
									interaction: { intersect: true },
									scales: {},
									plugins: {
										legend: { display: false },
										tooltip: false
									}
								}
							})
					
							this.$watch('values', () => {
								chart.data.labels = this.labels
								chart.data.datasets[0].data = this.values
								chart.update()
							})
						}
					}">
                        <canvas x-ref="canvas" class="!w-full !h-full"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <h3 class="text-3xl font-bold text-dark border-t border-dark/10 pt-6 my-10">My account</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 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-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light">
                    <i class="fas fa-th-large fa-3x"></i>
                </div>
                <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Manage account</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-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light">
                    <i class="fas fa-user fa-3x"></i>
                </div>
                <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">My Profile</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-teal group-hover:bg-secondary 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">Family & Dependants</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-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light">
                    <i class="fas fa-phone-alt fa-3x"></i>
                </div>
                <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Emergency contacts</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-teal group-hover:bg-secondary rounded-full w-24 h-24 flex justify-center items-center text-light">
                    <i class="fas fa-star fa-3x"></i>
                </div>
                <div class="text-lg sm:text-xl font-bold group-focus:underline underline-offset-8">Beneficiaries</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-teal group-hover:bg-secondary 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">Documents</div>
            </a>
        </div>

    </div>
</div>