Tailwind pills

Responsive Pills built with the latest Tailwind. Navs like tabs or pills help to organize content on a page. Learn how to use pills in the navbar, in content, in cards, and with different styling options.


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
<div class="p-5 w-3/4 m-auto">
  <button
    class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
    type="button"
  >
    Pill 1
  </button>
  <button
    class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
    type="button"
  >
    Pill 2
  </button>
  <button
    class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
    type="button"
  >
    Pill 3
  </button>
  <div class="container w-full p-20 mx-auto  text-center bg-white border-2 border-gray-300 border-dashed h-96 rounded-xl">
    <p class="mt-20 italic text-gray-500 text-md ">
      --  Content of your page --
    </p>
</div>
</div>