Tabs using AlpineJS + TailwindCSS

index.html

<div class="bg-gray-300 flex justify-center items-center p-8 h-full h-screen">
  <div x-data="{ tab: 'foo' }" style="max-width:550px">
    <div 
      class="flex -mx-px"
    >
      <button
        x-on:click="tab = 'foo'"
        x-bind:class="{ 'bg-white border-white': tab === 'foo' }"
        class="bg-transparent hover:bg-gray-200 text-gray-700 text-sm md:text-base font-semibold rounded-t focus:outline-none mx-px py-px md:py-2 px-3 md:px-4"
        type="button"
      >
        Foo
      </button>
      <button
        x-on:click="tab = 'bar'"
        x-bind:class="{ 'bg-white border-white': tab === 'bar' }"
        class="bg-transparent hover:bg-gray-200 text-gray-700 font-semibold rounded-t focus:outline-none mx-px py-2 px-4"
        type="button"
      >
        Bar
      </button>
      <button
        x-on:click="tab = 'baz'"
        x-bind:class="{ 'bg-white border-white': tab === 'baz' }"
        class="bg-transparent hover:bg-gray-200 text-gray-700 text-sm md:text-base font-semibold rounded-t focus:outline-none mx-px py-px md:py-2 px-3 md:px-4"
        type="button"
      >
        Baz
      </button>
      <button
        class="bg-transparent text-gray-500 text-sm md:text-base font-semibold rounded-t cursor-not-allowed mx-px py-px md:py-2 px-3 md:px-4"
        type="button"
        disabled
      >
        Disabled
      </button>
    </div>
    <ul class="bg-white text-sm rounded-b p-4">
      <li x-show="tab === 'foo'">
        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. <span class="hidden md:block">Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.<span>
      </li>
      <li x-show="tab === 'bar'">
        Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. <span class="hidden md:block">Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</span>
      </li>
      <li x-show="tab === 'baz'">
        Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. <span class="hidden md:block">Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</span>
      </li>
    </ul>
  </div>
</div>

<footer class="text-gray-600 text-xs absolute bottom-0 left-0 mb-3 ml-3">
  <a class="text-gray-600 hover:text-gray-800 font-semibold underline" href="https://github.com/alpinejs/alpine" target="_blank">AlpineJS</a> 
  by @<a class="text-gray-600 hover:text-gray-800 font-semibold underline" href="https://twitter.com/calebporzio">calebporzio</a>
  &amp;&amp;
  <a class="text-gray-600 hover:text-gray-800 font-semibold underline" href="https://github.com/tailwindcss/tailwindcss">TailwindCSS</a>
  by @<a class="text-gray-600 hover:text-gray-800 font-semibold underline" href="https://twitter.com/adamwathan">adamwathan</a>
</footer>

script.js

// no js

scripts

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>

style.css

/* no css */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet" />

tabs-using-alpinejs-tailwindcss.markdown

Tabs using AlpineJS + TailwindCSS

A quick grab n'copy snippet of a Tabs component made with AlpineJS and TailwindCSS.

A Pen by Caneco on CodePen.

License.