Developer-Friendly Tailwind Ecommerce Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Ecommerce Sidebar Navigation

<span
                class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
              >
                General
              </span>
            </a>
          </div>

<span
                  class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
                >
                  Teams
                </span>
              </a>
            </li>

<span
                  class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
                >
                  Billing
                </span>
              </a>
            </li>

<span
                  class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
                >
                  Invoices
                </span>
              </a>
            </li>

<span
                  class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
                >
                  Account
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

<span
            class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
          >
            Logout
          </span>
        </button>
      </form>
    </div>
  </div>

<div class="flex h-screen flex-1 flex-col justify-between border-e bg-white">
    <div class="px-4 py-6">
      <ul class="mt-14 space-y-1">
        <li>
          <a
            href="#"
            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
          >
            General
          </a>
        </li>

<li>
          <details class="group [&_summary::-webkit-details-marker]:hidden">
            <summary
              class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
            >
              <span class="text-sm font-medium"> Teams </span>

<ul class="mt-2 space-y-1 px-4">
              <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"
                >
                  Banned Users
                </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>
          </details>
        </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"
          >
            Billing
          </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"
          >
            Invoices
          </a>
        </li>

<ul class="mt-2 space-y-1 px-4">
              <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"
                >
                  Details
                </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"
                >
                  Security
                </a>
              </li>

<li>
                <form action="#">
                  <button
                    type="submit"
                    class="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>
          </details>
        </li>
      </ul>
    </div>
  </div>
</div>

<js-component src="ecommerce/nav-cart"></js-component>

ECommerce Navigation with Cart

View

<section class="relative w-full   text-gray-700 body-font" data-tails-scripts="//unpkg.com/alpinejs" {!! $attributes ?? '' !!}>
				<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
					<a href="/" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none text-black select-none">tailwindcart.</a>

<div  x-data="{ open: false }" class="absolute top-0 right-0 w-64  ">
            <div @click="open = !open" class="  relative z-10 cursor-pointer bg-white mt-0 px-3 py-1 border-t border-l border-r border-transparent rounded-t-lg text-right flex flex-col justify-between">
                <p class="flex items-center font-bold mb-0 self-end">
                    <i class="fa fa-shopping-cart mr-2 text-slate-700" aria-hidden="true"></i> Cart
                </p>
                <a href="#" class="text-blue-500 hover:text-blue-700">
                    <span id="cart-total">0 item(s) - $0.00 <i class="fa fa-angle-down text-gray-500 text-xs" aria-hidden="true"></i></span>
                </a>
            </div>
            <div x-show="open" @click.away="open = false" class="z-50 relative mt-0 top-0 p-8 border-b border-r border-l border-gray-200 rounded-b-xl shadow-md bg-white">
                <div class="empty text-gray-500">Your shopping cart is empty!</div>
            </div>
        </div>

</div>
			</section>
			
		</header>

<js-component src="ecommerce/nav-cart"></js-component>