Tailwind tabs

Responsive Tabs built with the latest Tailwind. Tabs help you create panels with content that can be hidden by default and activated on click. Learn how to use tabs with switch, vertical orientation and more.


Basic

-- Content of your page --

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ul class="list-reset flex">
  <li class="-mb-px mr-1">
    <a
      class="bg-white inline-block rounded-t py-2 px-4 font-semibold"
      href="#"
      >Active</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block py-2 px-4 hover:text-blue-darker hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block py-2 px-4 hover:text-blue-darker hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
  <li class="mr-1">
    <a class="bg-white inline-block py-2 px-4" href="#">Tab</a>
  </li>
</ul>
<div
  class="container w-full p-20 mx-auto text-center bg-white border-2 border-gray-300 border-dashed h-96 rounded-xl rounded-t-none border-t-0"
>
  <p class="mt-20 italic text-gray-500 text-md">
    -- Content of your page --
  </p>
</div>

Line

-- Content of your page --

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<ul class="list-reset flex border-b">
  <li class="-mb-px mr-1">
    <a
      class="bg-white inline-block rounded-t py-2 px-4 hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block border-b-2 py-2 px-4 hover:text-blue-darker font-semibold hover:text-purple-500 focus:outline-none"
      href="#"
      >Active</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block py-2 px-4 hover:text-blue-darker hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block py-2 px-4 hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
</ul>
<div
  class="container w-full p-20 mx-auto text-center bg-white border-2 border-t-0 border-gray-300 border-dashed h-96 rounded-xl rounded-t-none"
>
  <p class="mt-20 italic text-gray-500 text-md">
    -- Content of your page --
  </p>
</div>

Border

-- Content of your page --

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ul class="list-reset flex border-b">
  <li class="-mb-px mr-1">
    <a
      class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 font-semibold hover:text-purple-500 focus:outline-none"
      href="#"
      >Active</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block py-2 px-4 hover:text-blue-darker hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
  <li class="mr-1">
    <a
      class="bg-white inline-block py-2 px-4 hover:text-blue-darker hover:text-purple-500 focus:outline-none"
      href="#"
      >Tab</a
    >
  </li>
  <li class="mr-1">
    <a class="bg-white inline-block py-2 px-4" href="#">Tab</a>
  </li>
</ul>
<div
  class="container w-full p-20 mx-auto text-center bg-white border-2 border-t-0 border-gray-300 border-dashed h-96 rounded-xl rounded-t-none"
>
  <p class="mt-20 italic text-gray-500 text-md">
    -- Content of your page --
  </p>
</div>

Colored

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="bg-white">
  <nav class="flex flex-col sm:flex-row">
    <button
      class="text-gray-600 py-4 px-6 block hover:text-purple-500 focus:outline-none text-purple-500 border-b-2 font-medium border-purple-500"
    >
      Tab 1</button
    ><button
      class="text-gray-600 py-4 px-6 block hover:text-purple-500 focus:outline-none"
    >
      Tab 2</button
    ><button
      class="text-gray-600 py-4 px-6 block hover:text-purple-500 focus:outline-none"
    >
      Tab 3</button
    ><button
      class="text-gray-600 py-4 px-6 block hover:text-purple-500 focus:outline-none"
    >
      Tab 4
    </button>
  </nav>
</div>