TRS

<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>