Developer-Friendly Tailwind Application Components

Navigation With Icons

<nav x-data="{open :fasle}" class="shadow-dark-mild relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 lg:py-4" data-twe-navbar-ref>
  <div class="flex w-full flex-wrap items-center justify-between px-3">
    <div class="relative flex items-center">
      
      <a class="ps-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none" href="#">
        <span class="[&>svg]:w-5">
          <i class="fa-solid fa-cart-shopping h-4 w-4"></i>
        </span>
      </a>
      
      <a class="ps-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none" href="#">
        <span class="[&>svg]:w-5">
          <i class="fa-brands fa-twitter h-4 w-4"></i>
        </span>
      </a>

<div class="relative" data-twe-dropdown-ref>
        <a class="flex items-center px-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none" href="#" type="button" id="dropdownMenuButton2" data-twe-dropdown-toggle-ref aria-expanded="false">
          <span class="[&>svg]:h-5 [&>svg]:w-5">
            <i class="fa-solid fa-user h-4 w-4"></i>
          </span>
          <span class="[&>svg]:w-5" @click="open = !open">
            <i class="fa-solid fa-chevron-down h-4 w-4"></i>
          </span>
        </a>
        <ul x-show="open" class="absolute z-[1000] float-left m-0 min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block" aria-labelledby="dropdownMenuButton1" data-twe-dropdown-menu-ref>
          <li>
            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>Action</a>
          </li>
          <li>
            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>Another action</a>
          </li>
          <li>
            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>Something else here</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<js-component src="application/navigation_with_icons"></js-component>

Tabs With Underlines

View

<js-component src="application/tabs_with_underline"></js-component>

Default Tabs

View

<js-component src="application/default_tabs"></js-component>

Tabs With Icons

View

<div class="border-b border-gray-200">
  <ul class="-mb-px flex flex-wrap text-center text-sm font-medium text-gray-500">
    <li class="me-2">
      <a href="#" class="justify-center group inline-flex items-center rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600">
        <svg class="me-2 h-4 w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" /></svg
        >Profile
      </a>
    </li>
    <li class="me-2">
      <a href="#" class="justify-center active group inline-flex items-center rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600" aria-current="page">
        <svg class="me-2 h-4 w-4 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
          <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" /></svg
        >Dashboard
      </a>
    </li>
    <li class="me-2">
      <a href="#" class="justify-center group inline-flex items-center rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600">
        <svg class="me-2 h-4 w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M5 11.424V1a1 1 0 1 0-2 0v10.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.228 3.228 0 0 0 0-6.152ZM19.25 14.5A3.243 3.243 0 0 0 17 11.424V1a1 1 0 0 0-2 0v10.424a3.227 3.227 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.243 3.243 0 0 0 2.25-3.076Zm-6-9A3.243 3.243 0 0 0 11 2.424V1a1 1 0 0 0-2 0v1.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0V8.576A3.243 3.243 0 0 0 13.25 5.5Z" /></svg
        >Settings
      </a>
    </li>
    <li class="me-2">
      <a href="#" class="justify-center group inline-flex items-center rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600">
        <svg class="me-2 h-4 w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
          <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z" /></svg
        >Contacts
      </a>
    </li>
    <li>
      <a class="inline-block cursor-not-allowed rounded-t-lg p-4 text-gray-400">Disabled</a>
    </li>
  </ul>
</div>

<js-component src="application/tabs_with_icons"></js-component>

Pills Tabs

View

<js-component src="application/pills_tabs"></js-component>

Active Tabs

View

<div class="mb-4 border-b border-gray-200">
  <ul class="-mb-px flex flex-wrap text-center text-sm font-medium" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600  hover:text-purple-600   border-purple-600 " data-tabs-inactive-classes="  text-gray-500 hover:text-gray-600   border-gray-100 hover:border-gray-300  " role="tablist">
    <li class="me-2" role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4" id="profile-styled-tab" data-tabs-target="#styled-profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
    </li>
    <li class="me-2" role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4 hover:border-gray-300 hover:text-gray-600" id="dashboard-styled-tab" data-tabs-target="#styled-dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Dashboard</button>
    </li>
    <li class="me-2" role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4 hover:border-gray-300 hover:text-gray-600" id="settings-styled-tab" data-tabs-target="#styled-settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
    </li>
    <li role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4 hover:border-gray-300 hover:text-gray-600" id="contacts-styled-tab" data-tabs-target="#styled-contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">Contacts</button>
    </li>
  </ul>
</div>
<div id="default-styled-tab-content">
  <div class="hidden rounded-lg bg-gray-50 p-4" id="styled-profile" role="tabpanel" aria-labelledby="profile-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
  <div class="hidden rounded-lg bg-gray-50 p-4" id="styled-dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
  <div class="hidden rounded-lg bg-gray-50 p-4" id="styled-settings" role="tabpanel" aria-labelledby="settings-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
  <div class="hidden rounded-lg bg-gray-50 p-4" id="styled-contacts" role="tabpanel" aria-labelledby="contacts-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
</div>

<js-component src="application/active_tabs"></js-component>

Interactive Tabs

View

<div class="mb-4 border-b border-gray-200">
  <ul class="-mb-px flex flex-wrap text-center text-sm font-medium" id="default-tab" data-tabs-toggle="#default-tab-content" role="tablist">
    <li class="me-2" role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4" id="profile-tab" data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
    </li>
    <li class="me-2" role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4 hover:border-gray-300 hover:text-gray-600" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Dashboard</button>
    </li>
    <li class="me-2" role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4 hover:border-gray-300 hover:text-gray-600" id="settings-tab" data-tabs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
    </li>
    <li role="presentation">
      <button class="inline-block rounded-t-lg border-b-2 p-4 hover:border-gray-300 hover:text-gray-600" id="contacts-tab" data-tabs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">Contacts</button>
    </li>
  </ul>
</div>
<div id="default-tab-content">
  <div class="hidden rounded-lg bg-gray-50 p-4" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
  <div class="hidden rounded-lg bg-gray-50 p-4" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
  <div class="hidden rounded-lg bg-gray-50 p-4" id="settings" role="tabpanel" aria-labelledby="settings-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
  <div class="hidden rounded-lg bg-gray-50 p-4" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
    <p class="text-sm text-gray-500">This is some placeholder content the <strong class="font-medium text-gray-800">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
</div>

<js-component src="application/interactive_tabs"></js-component>

Full Width Tabs

View

<div class="sm:hidden">
  <label for="tabs" class="sr-only">Select your country</label>
  <select id="tabs" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
    <option>Profile</option>
    <option>Dashboard</option>
    <option>setting</option>
    <option>Invoioce</option>
  </select>
</div>
<ul class="hidden rounded-lg text-center text-sm font-medium text-gray-500 shadow sm:flex">
  <li class="w-full focus-within:z-10">
    <a href="#" class="active inline-block w-full rounded-s-lg border-r border-gray-200 bg-gray-100 p-4 text-gray-900 focus:outline-none focus:ring-4 focus:ring-blue-300" aria-current="page">Profile</a>
  </li>
  <li class="w-full focus-within:z-10">
    <a href="#" class="inline-block w-full border-r border-gray-200 bg-white p-4 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">Dashboard</a>
  </li>
  <li class="w-full focus-within:z-10">
    <a href="#" class="inline-block w-full border-r border-gray-200 bg-white p-4 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">Settings</a>
  </li>
  <li class="w-full focus-within:z-10">
    <a href="#" class="inline-block w-full rounded-e-lg border-s-0 border-gray-200 bg-white p-4 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">Invoice</a>
  </li>
</ul>

<js-component src="application/form_disable"></js-component>

Vertical Tabs

View

<div class="md:flex">
  <ul class="flex-column space-y mb-4 space-y-4 text-sm font-medium text-gray-500 md:mb-0 md:me-4">
    <li>
      <a href="#" class="active inline-flex w-full items-center rounded-lg bg-blue-700 px-4 py-3 text-white" aria-current="page">
        <svg class="me-2 h-4 w-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
        </svg>
        Profile
      </a>
    </li>
    <li>
      <a href="#" class="inline-flex w-full items-center rounded-lg bg-gray-50 px-4 py-3 hover:bg-gray-100 hover:text-gray-900">
        <svg class="me-2 h-4 w-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" /></svg>
        Dashboard
      </a>
    </li>
    <li>
      <a href="#" class="inline-flex w-full items-center rounded-lg bg-gray-50 px-4 py-3 hover:bg-gray-100 hover:text-gray-900">
        <svg class="me-2 h-4 w-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z" />
        </svg>
        Settings
      </a>
    </li>
    <li>
      <a href="#" class="inline-flex w-full items-center rounded-lg bg-gray-50 px-4 py-3 hover:bg-gray-100 hover:text-gray-900">
        <svg class="me-2 h-4 w-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0-5.674.13 1 1 0 0 0 .725 1.688Z" />
          <path d="M17 7A7 7 0 1 0 3 7a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1V7a5 5 0 1 1 10 0v7.083A2.92 2.92 0 0 1 12.083 17H12a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4H17a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3Z" />
        </svg>
        Contact
      </a>
    </li>
    <li>
      <a class="inline-flex w-full cursor-not-allowed items-center rounded-lg bg-gray-50 px-4 py-3 text-gray-400">
        <svg class="me-2 h-4 w-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z" />
        </svg>
        Disabled</a
      >
    </li>
  </ul>
  <div class="text-medium w-full rounded-lg bg-gray-50 p-6 text-gray-500">
    <h3 class="mb-2 text-lg font-bold text-gray-900">Profile Tab</h3>
    <p class="mb-2">This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.</p>
    <p>The tab JavaScript swaps classes to control the content visibility and styling.</p>
  </div>
</div>

<js-component src="application/vertical_tabs"></js-component>

Solid Background

View

<nav class="flex rounded-lg border border-gray-200 bg-gray-50 px-5 py-3 text-gray-700" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
        <svg class="me-2.5 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="mx-1 block h-3 w-3 text-gray-400 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2">Templates</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="mx-1 h-3 w-3 text-gray-400 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2">Jamstackers.</span>
      </div>
    </li>
  </ol>
</nav>

<js-component src="application/solid_background_navigation"></js-component>

Sidebar Navigation

View

<js-component src="application/sidebar_navigation"></js-component>

Tabs

View

<div x-data="{ activeTab: 'tab1' }" class="w-full max-w-md mx-auto">
    <ul role="tablist" class="flex border-b border-gray-300">
        <li class="mr-1" role="presentation">
            <button
                class="inline-block py-2 px-4 text-sm font-semibold text-black border-b-2 transition duration-150 ease-in-out"
                :class="{ 'border-blue-500': activeTab === 'tab1', 'border-transparent': activeTab !== 'tab1' }"
                @click="activeTab = 'tab1'" role="tab" aria-selected="activeTab === 'tab1'">
                Tab 1
            </button>
        </li>
        <li class="mr-1" role="presentation">
            <button
                class="inline-block py-2 px-4 text-sm font-semibold text-black border-b-2 transition duration-150 ease-in-out"
                :class="{ 'border-blue-500': activeTab === 'tab2', 'border-transparent': activeTab !== 'tab2' }"
                @click="activeTab = 'tab2'" role="tab" aria-selected="activeTab === 'tab2'">
                Tab 2
            </button>
        </li>
        <li role="presentation">
            <button
                class="inline-block py-2 px-4 text-sm font-semibold text-black border-b-2 transition duration-150 ease-in-out"
                :class="{ 'border-blue-500': activeTab === 'tab3', 'border-transparent': activeTab !== 'tab3' }"
                @click="activeTab = 'tab3'" role="tab" aria-selected="activeTab === 'tab3'">
                Tab 3
            </button>
        </li>
    </ul>
    <div role="tabpanel" x-show="activeTab === 'tab1'" class="p-4 border border-gray-300 mt-2">
        <p>Content for Tab 1.</p>
    </div>
    <div role="tabpanel" x-show="activeTab === 'tab2'" class="p-4 border border-gray-300 mt-2">
        <p>Content for Tab 2.</p>
    </div>
    <div role="tabpanel" x-show="activeTab === 'tab3'" class="p-4 border border-gray-300 mt-2">
        <p>Content for Tab 3.</p>
    </div>
</div>

<js-component src="application/tabs"></js-component>

Breadcrumb Navigation

View

<js-component src="application/breadcrumb_navigation"></js-component>