Developer-Friendly Tailwind Ecommerce Components

Heading Underline

View

<js-component src="ecommerce/heading_underline"></js-component>

Header Sizes

View

<js-component src="ecommerce/header_sizes"></js-component>

Breadcrumb Context

View

<div class="flex flex-col">
  <nav class="mb-4 flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3 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 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">Projects</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">Jamstacker</span>
        </div>
      </li>
    </ol>
  </nav>
  <h2 class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-4xl">Team management</h2>
</div>

<js-component src="ecommerce/breadcrumb_context"></js-component>

Badge Context Header

View

<js-component src="ecommerce/badge_context_header"></js-component>

Search Bar

View

<js-component src="ecommerce/search_bar"></js-component>

Cart Icon

View

<js-component src="ecommerce/cart_icon"></js-component>

User Account Links

View

<js-component src="ecommerce/user_account_links"></js-component>

<header class="bg-white border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex-shrink-0 flex items-center">
                    <img class="h-8 w-auto" src="https://placehold.co/100x40" alt="Logo">
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                    <a href="#" class="border-transparent text-black inline-flex items-center px-1 pt-1 text-sm font-medium">
                        Home
                    </a>
                    <a href="#" class="border-transparent text-black inline-flex items-center px-1 pt-1 text-sm font-medium">
                        Shop
                    </a>
                    <a href="#" class="border-transparent text-black inline-flex items-center px-1 pt-1 text-sm font-medium">
                        About Us
                    </a>
                    <a href="#" class="border-transparent text-black inline-flex items-center px-1 pt-1 text-sm font-medium">
                        Contact
                    </a>
                </div>
            </div>
            <div class="-mr-2 flex items-center sm:hidden">
                <button x-data="{ open: false }" @click="open = !open" type="button"
                    class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-black hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-black"
                    aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    
                    
                    ?
                </button>
            </div>
        </div>
    </div>

<div class="sm:hidden" id="mobile-menu" x-show="open">
        <div class="pt-2 pb-3 space-y-1">
            <a href="#"
                class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                Home
            </a>
            <a href="#"
                class="border-transparent text-black hover:bg-gray-50 hover:border-gray-300 hover:text-black block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                Shop
            </a>
            <a href="#"
                class="border-transparent text-black hover:bg-gray-50 hover:border-gray-300 hover:text-black block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                About Us
            </a>
            <a href="#"
                class="border-transparent text-black hover:bg-gray-50 hover:border-gray-300 hover:text-black block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                Contact
            </a>
        </div>
    </div>
</header>

<js-component src="ecommerce/navigation_menu"></js-component>

Logo

View

<js-component src="ecommerce/logo"></js-component>

Heading Underline

Header Sizes

Breadcrumb Context

Badge Context Header

Search Bar

Cart Icon

User Account Links

Navigation Menu

Logo