@props([
    'tab' => 'description'
    ]
)
<button :class="{ 'bg-white border-2 border-gray-600': tab === '{{ $tab }}', 'bg-blue-100 opacity-50' : tab !== '{{ $tab }}'}" x-on:click.prevent="tab='{{ $tab }}'; window.location.hash = '{{ $tab }}'" href="#"
    {{ $attributes->merge(['class' => 'block w-full p-4 text-cool-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-cool-gray-800 focus:underline transition duration-150 ease-in-out']) }}
>
    {{ $slot }}
</button>