Developer-Friendly Tailwind General Components

Dark and White List

<div class="flow-root">
  <ul class="-my-2 divide-y divide-gray-100">
    <li class="py-2">
      <ul class="space-y-1">
        <li>
          <a href="#" class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
            Profile
          </a>
        </li>

<li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
          >
            Projects
          </a>
        </li>

<li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
          >
            Meetings
          </a>
        </li>

<li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
          >
            Calendar
          </a>
        </li>
      </ul>
    </li>

<li class="py-2">
      <ul class="space-y-1">
        <li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
          >
            Update
          </a>
        </li>

<li>
          <a
            href="#"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
          >
            Settings
          </a>
        </li>
      </ul>
    </li>

<li class="py-2">
      <form action="#">
        <button
          type="submit"
          class="block w-full rounded-lg px-4 py-2 text-sm font-medium text-gray-500 [text-align:_inherit] hover:bg-gray-100 hover:text-gray-700"
        >
          Logout
        </button>
      </form>
    </li>
  </ul>
</div>

<js-component src="general/large_lists"></js-component>

Large Lists

View

<div class="bg-white border-t border-b border-gray-200 overflow-x-hidden lg:overflow-x-auto">
    <ul class="divide-y divide-gray-200">
        
        <li class="px-4 py-4 sm:px-6 flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://placehold.co/60x60" alt="Placeholder" class="h-12 w-12 rounded-full">
                <div class="ml-4">
                    <p class="text-sm font-medium text-black truncate">Item Name 1</p>
                    <p class="text-sm text-gray-500 truncate">Details about the item 1</p>
                </div>
            </div>
            <div class="flex-shrink-0">
                <button class="inline-flex items-center px-3 py-0.5 border border-transparent text-sm leading-5 font-medium rounded-full text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none">Action</button>
            </div>
        </li>
        
        <li class="px-4 py-4 sm:px-6 flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://placehold.co/60x60" alt="Placeholder" class="h-12 w-12 rounded-full">
                <div class="ml-4">
                    <p class="text-sm font-medium text-black truncate">Item Name 2</p>
                    <p class="text-sm text-gray-500 truncate">Details about the item 2</p>
                </div>
            </div>
            <div class="flex-shrink-0">
                <button class="inline-flex items-center px-3 py-0.5 border border-transparent text-sm leading-5 font-medium rounded-full text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none">Action</button>
            </div>
        </li>
        
    </ul>
</div>

<js-component src="general/large_lists"></js-component>

List Groups

View

<js-component src="general/list_groups"></js-component>