Getting started

Components

Navigation

Forms

Tailwind list groups

Responsive list groups built with the latest Tailwind. List groups are responsive components for displaying a series of content. A beautiful alternative to unordered lists.

Basic example

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
        
            
    <div class="flex justify-center">
      <ul class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
        <li class="px-6 py-2 border-b border-gray-200 w-full rounded-t-lg">An item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A second item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A third item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A fourth item</li>
        <li class="px-6 py-2 w-full rounded-b-lg">And a fifth one</li>
      </ul>
    </div>

Active items

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
        
            
    <div class="flex justify-center">
      <ul class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
        <li class="px-6 py-2 border-b border-gray-200 w-full rounded-t-lg bg-blue-600 text-white">
          An active item
        </li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A second item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A third item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A fourth item</li>
        <li class="px-6 py-2 w-full rounded-b-lg">And a fifth one</li>
      </ul>
    </div>

Disabled items

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
        
            
    <div class="flex justify-center">
      <ul class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
        <li
          class="
            px-6
            py-2
            border-b border-gray-200
            w-full
            rounded-t-lg
            text-gray-400
            cursor-default
          "
        >
          A disabled item
        </li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A second item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A third item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A fourth item</li>
        <li class="px-6 py-2 w-full rounded-b-lg">And a fifth one</li>
      </ul>
    </div>

Links

The current link item A second link item A third link item A fourth link item A disabled link item 
        
            
    <div class="flex justify-center">
      <div class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
        <a
          href="#!"
          aria-current="true"
          class="
            block
            px-6
            py-2
            border-b border-gray-200
            w-full
            rounded-t-lg
            bg-blue-600
            text-white
            cursor-pointer
          "
        >
          The current link item
        </a>
        <a
          href="#!"
          class="
            block
            px-6
            py-2
            border-b border-gray-200
            w-full
            hover:bg-gray-100 hover:text-gray-500
            focus:outline-none focus:ring-0 focus:bg-gray-200 focus:text-gray-600
            transition
            duration-500
            cursor-pointer
          "
        >
          A second link item
        </a>
        <a
          href="#!"
          class="
            block
            px-6
            py-2
            border-b border-gray-200
            w-full
            hover:bg-gray-100 hover:text-gray-500
            focus:outline-none focus:ring-0 focus:bg-gray-200 focus:text-gray-600
            transition
            duration-500
            cursor-pointer
          "
        >
          A third link item
        </a>
        <a
          href="#!"
          class="
            block
            px-6
            py-2
            border-b border-gray-200
            w-full
            hover:bg-gray-100 hover:text-gray-500
            focus:outline-none focus:ring-0 focus:bg-gray-200 focus:text-gray-600
            transition
            duration-500
            cursor-pointer
          "
        >
          A fourth link item
        </a>
        <a
          href="#!"
          class="
            block
            px-6
            py-2
            border-gray-200
            w-full
            rounded-b-lg
            focus:outline-none focus:ring-0
            text-gray-400
            cursor-default
          "
        >
          A disabled link item
        </a>
      </div>
    </div>

Buttons

        
            
    <div class="flex justify-center">
      <div class="bg-white rounded-lg border border-gray-200 w-96 text-gray-900">
        <button
          aria-current="true"
          type="button"
          class="
            text-left
            px-6
            py-2
            border-b border-gray-200
            w-full
            rounded-t-lg
            bg-blue-600
            text-white
            cursor-pointer
          "
        >
          The current link item
        </button>
        <button
          type="button"
          class="
            text-left
            px-6
            py-2
            border-b border-gray-200
            w-full
            hover:bg-gray-100 hover:text-gray-500
            focus:outline-none focus:ring-0 focus:bg-gray-200 focus:text-gray-600
            transition
            duration-500
            cursor-pointer
          "
        >
          A second link item
        </button>
        <button
          type="button"
          class="
            text-left
            px-6
            py-2
            border-b border-gray-200
            w-full
            hover:bg-gray-100 hover:text-gray-500
            focus:outline-none focus:ring-0 focus:bg-gray-200 focus:text-gray-600
            transition
            duration-500
            cursor-pointer
          "
        >
          A third link item
        </button>
        <button
          type="button"
          class="
            text-left
            px-6
            py-2
            border-b border-gray-200
            w-full
            hover:bg-gray-100 hover:text-gray-500
            focus:outline-none focus:ring-0 focus:bg-gray-200 focus:text-gray-600
            transition
            duration-500
            cursor-pointer
          "
        >
          A fourth link item
        </button>
        <button
          disabled=""
          type="button"
          class="
            text-left
            px-6
            py-2
            border-gray-200
            w-full
            rounded-b-lg
            focus:outline-none focus:ring-0
            text-gray-400
            cursor-default
          "
        >
          A disabled link item
        </button>
      </div>
    </div>

Flush

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
        
            
    <div class="flex justify-center">
      <ul class="bg-white rounded-lg w-96 text-gray-900">
        <li class="px-6 py-2 border-b border-gray-200 w-full rounded-t-lg">An item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A second item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A third item</li>
        <li class="px-6 py-2 border-b border-gray-200 w-full">A fourth item</li>
        <li class="px-6 py-2 w-full rounded-b-lg">And a fifth one</li>
      </ul>
    </div>