 @props(['text', 'tab'])
 <div x-on:click="activeTab = {{ $tab }}"
     x-bind:class="{
         'bg-white text-secondary shadow-md font-bold dark:bg-secondary dark:text-white': activeTab ===
             {{ $tab }},
         'bg-gray-100 dark:bg-secondary-dark dark:text-tx-var-primary': activeTab !== {{ $tab }}
     }"
     class="flex flex-col items-center justify-center px-4 py-3 transition-all duration-500 ease-in-out rounded-lg cursor-pointer">
     <p>
         {{ $text }}
     </p>
 </div>
