tailwind_dsl 0.0.3 → 0.0.4

data/.components/tui/ecommerce/page/category-pages/02.clean.html

@@ -0,0 +1,923 @@
+<div class="bg-white">
+  <div>
+    <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+      <div class="fixed inset-0 bg-black bg-opacity-25"></div>
+      <div class="fixed inset-0 z-40 flex">
+        <div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl">
+          <div class="flex px-4 pt-5 pb-2">
+            <button type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400">
+              <span class="sr-only">Close menu</span>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="mt-2">
+            <div class="border-b border-gray-200">
+              <div class="-mb-px flex space-x-8 px-4" aria-orientation="horizontal" role="tablist">
+                <button id="tabs-1-tab-1" class="text-gray-900 border-transparent flex-1 whitespace-nowrap border-b-2 py-4 px-1 text-base font-medium" aria-controls="tabs-1-panel-1" role="tab" type="button">Women</button>
+                <button id="tabs-1-tab-2" class="text-gray-900 border-transparent flex-1 whitespace-nowrap border-b-2 py-4 px-1 text-base font-medium" aria-controls="tabs-1-panel-2" role="tab" type="button">Men</button>
+              </div>
+            </div>
+            <div id="tabs-1-panel-1" class="space-y-10 px-4 pt-10 pb-8" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
+              <div class="grid grid-cols-2 gap-x-4">
+                <div class="group relative text-sm">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-01.jpg" alt="Models sitting back to back, wearing Basic Tee in black and bone." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    New Arrivals
+                  </a>
+                  <p aria-hidden="true" class="mt-1">Shop now</p>
+                </div>
+                <div class="group relative text-sm">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-02.jpg" alt="Close up of Basic Tee fall bundle with off-white, ochre, olive, and black tees." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    Basic Tees
+                  </a>
+                  <p aria-hidden="true" class="mt-1">Shop now</p>
+                </div>
+              </div>
+              <div>
+                <p id="women-clothing-heading-mobile" class="font-medium text-gray-900">Clothing</p>
+                <ul role="list" aria-labelledby="women-clothing-heading-mobile" class="mt-6 flex flex-col space-y-6">
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Tops</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Dresses</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Pants</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Denim</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Sweaters</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">T-Shirts</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Jackets</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Activewear</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Browse All</a>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <p id="women-accessories-heading-mobile" class="font-medium text-gray-900">Accessories</p>
+                <ul role="list" aria-labelledby="women-accessories-heading-mobile" class="mt-6 flex flex-col space-y-6">
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Watches</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Wallets</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Bags</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Sunglasses</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Hats</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Belts</a>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <p id="women-brands-heading-mobile" class="font-medium text-gray-900">Brands</p>
+                <ul role="list" aria-labelledby="women-brands-heading-mobile" class="mt-6 flex flex-col space-y-6">
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Full Nelson</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">My Way</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Re-Arranged</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Counterfeit</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Significant Other</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div id="tabs-1-panel-2" class="space-y-10 px-4 pt-10 pb-8" aria-labelledby="tabs-1-tab-2" role="tabpanel" tabindex="0">
+              <div class="grid grid-cols-2 gap-x-4">
+                <div class="group relative text-sm">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/product-page-04-detail-product-shot-01.jpg" alt="Drawstring top with elastic loop closure and textured interior padding." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    New Arrivals
+                  </a>
+                  <p aria-hidden="true" class="mt-1">Shop now</p>
+                </div>
+                <div class="group relative text-sm">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-06.jpg" alt="Three shirts in gray, white, and blue arranged on table with same line drawing of hands and shapes overlapping on front of shirt." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    Artwork Tees
+                  </a>
+                  <p aria-hidden="true" class="mt-1">Shop now</p>
+                </div>
+              </div>
+              <div>
+                <p id="men-clothing-heading-mobile" class="font-medium text-gray-900">Clothing</p>
+                <ul role="list" aria-labelledby="men-clothing-heading-mobile" class="mt-6 flex flex-col space-y-6">
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Tops</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Pants</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Sweaters</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">T-Shirts</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Jackets</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Activewear</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Browse All</a>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <p id="men-accessories-heading-mobile" class="font-medium text-gray-900">Accessories</p>
+                <ul role="list" aria-labelledby="men-accessories-heading-mobile" class="mt-6 flex flex-col space-y-6">
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Watches</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Wallets</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Bags</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Sunglasses</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Hats</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Belts</a>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <p id="men-brands-heading-mobile" class="font-medium text-gray-900">Brands</p>
+                <ul role="list" aria-labelledby="men-brands-heading-mobile" class="mt-6 flex flex-col space-y-6">
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Re-Arranged</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Counterfeit</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">Full Nelson</a>
+                  </li>
+                  <li class="flow-root">
+                    <a href="#" class="-m-2 block p-2 text-gray-500">My Way</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="space-y-6 border-t border-gray-200 py-6 px-4">
+            <div class="flow-root">
+              <a href="#" class="-m-2 block p-2 font-medium text-gray-900">Company</a>
+            </div>
+            <div class="flow-root">
+              <a href="#" class="-m-2 block p-2 font-medium text-gray-900">Stores</a>
+            </div>
+          </div>
+          <div class="space-y-6 border-t border-gray-200 py-6 px-4">
+            <div class="flow-root">
+              <a href="#" class="-m-2 block p-2 font-medium text-gray-900">Sign in</a>
+            </div>
+            <div class="flow-root">
+              <a href="#" class="-m-2 block p-2 font-medium text-gray-900">Create account</a>
+            </div>
+          </div>
+          <div class="border-t border-gray-200 py-6 px-4">
+            <a href="#" class="-m-2 flex items-center p-2">
+              <img src="https://tailwindui.com/img/flags/flag-canada.svg" alt="" class="block h-auto w-5 flex-shrink-0">
+              <span class="ml-3 block text-base font-medium text-gray-900">CAD</span>
+              <span class="sr-only">, change currency</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <header class="relative bg-white">
+      <p class="flex h-10 items-center justify-center bg-indigo-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">Get free delivery on orders over $100</p>
+      <nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="border-b border-gray-200">
+          <div class="flex h-16 items-center">
+            <button type="button" class="rounded-md bg-white p-2 text-gray-400 lg:hidden">
+              <span class="sr-only">Open menu</span>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            </button>
+            <div class="ml-4 flex lg:ml-0">
+              <a href="#">
+                <span class="sr-only">Your Company</span>
+                <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="">
+              </a>
+            </div>
+            <div class="hidden lg:ml-8 lg:block lg:self-stretch">
+              <div class="flex h-full space-x-8">
+                <div class="flex">
+                  <div class="relative flex">
+                    <button type="button" class="border-transparent text-gray-700 hover:text-gray-800 relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out" aria-expanded="false">Women</button>
+                  </div>
+                  <div class="absolute inset-x-0 top-full z-10 text-sm text-gray-500">
+                    <div class="absolute inset-0 top-1/2 bg-white shadow" aria-hidden="true"></div>
+                    <div class="relative bg-white">
+                      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                        <div class="grid grid-cols-2 gap-y-10 gap-x-8 py-16">
+                          <div class="col-start-2 grid grid-cols-2 gap-x-8">
+                            <div class="group relative text-base sm:text-sm">
+                              <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                                <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-01.jpg" alt="Models sitting back to back, wearing Basic Tee in black and bone." class="object-cover object-center">
+                              </div>
+                              <a href="#" class="mt-6 block font-medium text-gray-900">
+                                <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                New Arrivals
+                              </a>
+                              <p aria-hidden="true" class="mt-1">Shop now</p>
+                            </div>
+                            <div class="group relative text-base sm:text-sm">
+                              <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                                <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-02.jpg" alt="Close up of Basic Tee fall bundle with off-white, ochre, olive, and black tees." class="object-cover object-center">
+                              </div>
+                              <a href="#" class="mt-6 block font-medium text-gray-900">
+                                <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                Basic Tees
+                              </a>
+                              <p aria-hidden="true" class="mt-1">Shop now</p>
+                            </div>
+                          </div>
+                          <div class="row-start-1 grid grid-cols-3 gap-y-10 gap-x-8 text-sm">
+                            <div>
+                              <p id="Clothing-heading" class="font-medium text-gray-900">Clothing</p>
+                              <ul role="list" aria-labelledby="Clothing-heading" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Tops</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Dresses</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Pants</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Denim</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Sweaters</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">T-Shirts</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Jackets</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Activewear</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Browse All</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div>
+                              <p id="Accessories-heading" class="font-medium text-gray-900">Accessories</p>
+                              <ul role="list" aria-labelledby="Accessories-heading" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Watches</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Wallets</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Bags</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Sunglasses</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Hats</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Belts</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div>
+                              <p id="Brands-heading" class="font-medium text-gray-900">Brands</p>
+                              <ul role="list" aria-labelledby="Brands-heading" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Full Nelson</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">My Way</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Re-Arranged</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Counterfeit</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Significant Other</a>
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex">
+                  <div class="relative flex">
+                    <button type="button" class="border-transparent text-gray-700 hover:text-gray-800 relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out" aria-expanded="false">Men</button>
+                  </div>
+                  <div class="absolute inset-x-0 top-full z-10 text-sm text-gray-500">
+                    <div class="absolute inset-0 top-1/2 bg-white shadow" aria-hidden="true"></div>
+                    <div class="relative bg-white">
+                      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                        <div class="grid grid-cols-2 gap-y-10 gap-x-8 py-16">
+                          <div class="col-start-2 grid grid-cols-2 gap-x-8">
+                            <div class="group relative text-base sm:text-sm">
+                              <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                                <img src="https://tailwindui.com/img/ecommerce-images/product-page-04-detail-product-shot-01.jpg" alt="Drawstring top with elastic loop closure and textured interior padding." class="object-cover object-center">
+                              </div>
+                              <a href="#" class="mt-6 block font-medium text-gray-900">
+                                <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                New Arrivals
+                              </a>
+                              <p aria-hidden="true" class="mt-1">Shop now</p>
+                            </div>
+                            <div class="group relative text-base sm:text-sm">
+                              <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
+                                <img src="https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-06.jpg" alt="Three shirts in gray, white, and blue arranged on table with same line drawing of hands and shapes overlapping on front of shirt." class="object-cover object-center">
+                              </div>
+                              <a href="#" class="mt-6 block font-medium text-gray-900">
+                                <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                Artwork Tees
+                              </a>
+                              <p aria-hidden="true" class="mt-1">Shop now</p>
+                            </div>
+                          </div>
+                          <div class="row-start-1 grid grid-cols-3 gap-y-10 gap-x-8 text-sm">
+                            <div>
+                              <p id="Clothing-heading" class="font-medium text-gray-900">Clothing</p>
+                              <ul role="list" aria-labelledby="Clothing-heading" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Tops</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Pants</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Sweaters</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">T-Shirts</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Jackets</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Activewear</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Browse All</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div>
+                              <p id="Accessories-heading" class="font-medium text-gray-900">Accessories</p>
+                              <ul role="list" aria-labelledby="Accessories-heading" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Watches</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Wallets</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Bags</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Sunglasses</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Hats</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Belts</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div>
+                              <p id="Brands-heading" class="font-medium text-gray-900">Brands</p>
+                              <ul role="list" aria-labelledby="Brands-heading" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Re-Arranged</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Counterfeit</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">Full Nelson</a>
+                                </li>
+                                <li class="flex">
+                                  <a href="#" class="hover:text-gray-800">My Way</a>
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Company</a>
+                <a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Stores</a>
+              </div>
+            </div>
+            <div class="ml-auto flex items-center">
+              <div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
+                <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Sign in</a>
+                <span class="h-6 w-px bg-gray-200" aria-hidden="true"></span>
+                <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Create account</a>
+              </div>
+              <div class="hidden lg:ml-8 lg:flex">
+                <a href="#" class="flex items-center text-gray-700 hover:text-gray-800">
+                  <img src="https://tailwindui.com/img/flags/flag-canada.svg" alt="" class="block h-auto w-5 flex-shrink-0">
+                  <span class="ml-3 block text-sm font-medium">CAD</span>
+                  <span class="sr-only">, change currency</span>
+                </a>
+              </div>
+              <div class="flex lg:ml-6">
+                <a href="#" class="p-2 text-gray-400 hover:text-gray-500">
+                  <span class="sr-only">Search</span>
+                  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+                  </svg>
+                </a>
+              </div>
+              <div class="ml-4 flow-root lg:ml-6">
+                <a href="#" class="group -m-2 flex items-center p-2">
+                  <svg class="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+                  </svg>
+                  <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
+                  <span class="sr-only">items in cart, view bag</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+  </div>
+  <div>
+    <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+      <div class="fixed inset-0 bg-black bg-opacity-25"></div>
+      <div class="fixed inset-0 z-40 flex">
+        <div class="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-6 shadow-xl">
+          <div class="flex items-center justify-between px-4">
+            <h2 class="text-lg font-medium text-gray-900">Filters</h2>
+            <button type="button" class="-mr-2 flex h-10 w-10 items-center justify-center p-2 text-gray-400 hover:text-gray-500">
+              <span class="sr-only">Close menu</span>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <form class="mt-4">
+            <div class="border-t border-gray-200 pt-4 pb-4">
+              <fieldset>
+                <legend class="w-full px-2">
+                  <button type="button" class="flex w-full items-center justify-between p-2 text-gray-400 hover:text-gray-500" aria-controls="filter-section-0" aria-expanded="false">
+                    <span class="text-sm font-medium text-gray-900">Color</span>
+                    <span class="ml-6 flex h-7 items-center">
+                      <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                      </svg>
+                    </span>
+                  </button>
+                </legend>
+                <div class="px-4 pt-4 pb-2" id="filter-section-0">
+                  <div class="space-y-6">
+                    <div class="flex items-center">
+                      <input id="color-0-mobile" name="color[]" value="white" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-0-mobile" class="ml-3 text-sm text-gray-500">White</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-1-mobile" name="color[]" value="beige" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-1-mobile" class="ml-3 text-sm text-gray-500">Beige</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-2-mobile" name="color[]" value="blue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-2-mobile" class="ml-3 text-sm text-gray-500">Blue</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-3-mobile" name="color[]" value="brown" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-3-mobile" class="ml-3 text-sm text-gray-500">Brown</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-4-mobile" name="color[]" value="green" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-4-mobile" class="ml-3 text-sm text-gray-500">Green</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-5-mobile" name="color[]" value="purple" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-5-mobile" class="ml-3 text-sm text-gray-500">Purple</label>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+            <div class="border-t border-gray-200 pt-4 pb-4">
+              <fieldset>
+                <legend class="w-full px-2">
+                  <button type="button" class="flex w-full items-center justify-between p-2 text-gray-400 hover:text-gray-500" aria-controls="filter-section-1" aria-expanded="false">
+                    <span class="text-sm font-medium text-gray-900">Category</span>
+                    <span class="ml-6 flex h-7 items-center">
+                      <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                      </svg>
+                    </span>
+                  </button>
+                </legend>
+                <div class="px-4 pt-4 pb-2" id="filter-section-1">
+                  <div class="space-y-6">
+                    <div class="flex items-center">
+                      <input id="category-0-mobile" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-0-mobile" class="ml-3 text-sm text-gray-500">All New Arrivals</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-1-mobile" name="category[]" value="tees" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-1-mobile" class="ml-3 text-sm text-gray-500">Tees</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-2-mobile" name="category[]" value="crewnecks" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-2-mobile" class="ml-3 text-sm text-gray-500">Crewnecks</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-3-mobile" name="category[]" value="sweatshirts" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-3-mobile" class="ml-3 text-sm text-gray-500">Sweatshirts</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-4-mobile" name="category[]" value="pants-shorts" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-4-mobile" class="ml-3 text-sm text-gray-500">Pants &amp; Shorts</label>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+            <div class="border-t border-gray-200 pt-4 pb-4">
+              <fieldset>
+                <legend class="w-full px-2">
+                  <button type="button" class="flex w-full items-center justify-between p-2 text-gray-400 hover:text-gray-500" aria-controls="filter-section-2" aria-expanded="false">
+                    <span class="text-sm font-medium text-gray-900">Sizes</span>
+                    <span class="ml-6 flex h-7 items-center">
+                      <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                      </svg>
+                    </span>
+                  </button>
+                </legend>
+                <div class="px-4 pt-4 pb-2" id="filter-section-2">
+                  <div class="space-y-6">
+                    <div class="flex items-center">
+                      <input id="sizes-0-mobile" name="sizes[]" value="xs" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-0-mobile" class="ml-3 text-sm text-gray-500">XS</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-1-mobile" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-1-mobile" class="ml-3 text-sm text-gray-500">S</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-2-mobile" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-2-mobile" class="ml-3 text-sm text-gray-500">M</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-3-mobile" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-3-mobile" class="ml-3 text-sm text-gray-500">L</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-4-mobile" name="sizes[]" value="xl" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-4-mobile" class="ml-3 text-sm text-gray-500">XL</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-5-mobile" name="sizes[]" value="2xl" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-5-mobile" class="ml-3 text-sm text-gray-500">2XL</label>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="border-b border-gray-200">
+      <nav aria-label="Breadcrumb" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <ol role="list" class="flex items-center space-x-4 py-4">
+          <li>
+            <div class="flex items-center">
+              <a href="#" class="mr-4 text-sm font-medium text-gray-900">Men</a>
+              <svg viewBox="0 0 6 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-auto text-gray-300">
+                <path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
+              </svg>
+            </div>
+          </li>
+          <li class="text-sm">
+            <a href="#" aria-current="page" class="font-medium text-gray-500 hover:text-gray-600">New Arrivals</a>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    <main class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
+      <div class="border-b border-gray-200 pt-24 pb-10">
+        <h1 class="text-4xl font-bold tracking-tight text-gray-900">New Arrivals</h1>
+        <p class="mt-4 text-base text-gray-500">Checkout out the latest release of Basic Tees, new and improved with four openings!</p>
+      </div>
+      <div class="pt-12 pb-24 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
+        <aside>
+          <h2 class="sr-only">Filters</h2>
+          <button type="button" class="inline-flex items-center lg:hidden">
+            <span class="text-sm font-medium text-gray-700">Filters</span>
+            <svg class="ml-1 h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+            </svg>
+          </button>
+          <div class="hidden lg:block">
+            <form class="space-y-10 divide-y divide-gray-200">
+              <div>
+                <fieldset>
+                  <legend class="block text-sm font-medium text-gray-900">Color</legend>
+                  <div class="space-y-3 pt-6">
+                    <div class="flex items-center">
+                      <input id="color-0" name="color[]" value="white" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-0" class="ml-3 text-sm text-gray-600">White</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-1" name="color[]" value="beige" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-1" class="ml-3 text-sm text-gray-600">Beige</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-2" name="color[]" value="blue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-2" class="ml-3 text-sm text-gray-600">Blue</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-3" name="color[]" value="brown" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-3" class="ml-3 text-sm text-gray-600">Brown</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-4" name="color[]" value="green" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-4" class="ml-3 text-sm text-gray-600">Green</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="color-5" name="color[]" value="purple" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="color-5" class="ml-3 text-sm text-gray-600">Purple</label>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div class="pt-10">
+                <fieldset>
+                  <legend class="block text-sm font-medium text-gray-900">Category</legend>
+                  <div class="space-y-3 pt-6">
+                    <div class="flex items-center">
+                      <input id="category-0" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-0" class="ml-3 text-sm text-gray-600">All New Arrivals</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-1" name="category[]" value="tees" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-1" class="ml-3 text-sm text-gray-600">Tees</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-2" name="category[]" value="crewnecks" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-2" class="ml-3 text-sm text-gray-600">Crewnecks</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-3" name="category[]" value="sweatshirts" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-3" class="ml-3 text-sm text-gray-600">Sweatshirts</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="category-4" name="category[]" value="pants-shorts" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="category-4" class="ml-3 text-sm text-gray-600">Pants &amp; Shorts</label>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div class="pt-10">
+                <fieldset>
+                  <legend class="block text-sm font-medium text-gray-900">Sizes</legend>
+                  <div class="space-y-3 pt-6">
+                    <div class="flex items-center">
+                      <input id="sizes-0" name="sizes[]" value="xs" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-0" class="ml-3 text-sm text-gray-600">XS</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-1" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-1" class="ml-3 text-sm text-gray-600">S</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-2" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-2" class="ml-3 text-sm text-gray-600">M</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-3" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-3" class="ml-3 text-sm text-gray-600">L</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-4" name="sizes[]" value="xl" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-4" class="ml-3 text-sm text-gray-600">XL</label>
+                    </div>
+                    <div class="flex items-center">
+                      <input id="sizes-5" name="sizes[]" value="2xl" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="sizes-5" class="ml-3 text-sm text-gray-600">2XL</label>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+            </form>
+          </div>
+        </aside>
+        <section aria-labelledby="product-heading" class="mt-6 lg:col-span-2 lg:mt-0 xl:col-span-3">
+          <h2 id="product-heading" class="sr-only">Products</h2>
+          <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-3">
+            <div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
+              <div class="aspect-w-3 aspect-h-4 bg-gray-200 group-hover:opacity-75 sm:aspect-none sm:h-96">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-01.jpg" alt="Eight shirts arranged on table in black, olive, grey, blue, white, red, mustard, and green." class="h-full w-full object-cover object-center sm:h-full sm:w-full">
+              </div>
+              <div class="flex flex-1 flex-col space-y-2 p-4">
+                <h3 class="text-sm font-medium text-gray-900">
+                  <a href="#">
+                    <span aria-hidden="true" class="absolute inset-0"></span>
+                    Basic Tee 8-Pack
+                  </a>
+                </h3>
+                <p class="text-sm text-gray-500">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+                <div class="flex flex-1 flex-col justify-end">
+                  <p class="text-sm italic text-gray-500">8 colors</p>
+                  <p class="text-base font-medium text-gray-900">$256</p>
+                </div>
+              </div>
+            </div>
+            <div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
+              <div class="aspect-w-3 aspect-h-4 bg-gray-200 group-hover:opacity-75 sm:aspect-none sm:h-96">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-02.jpg" alt="Front of plain black t-shirt." class="h-full w-full object-cover object-center sm:h-full sm:w-full">
+              </div>
+              <div class="flex flex-1 flex-col space-y-2 p-4">
+                <h3 class="text-sm font-medium text-gray-900">
+                  <a href="#">
+                    <span aria-hidden="true" class="absolute inset-0"></span>
+                    Basic Tee
+                  </a>
+                </h3>
+                <p class="text-sm text-gray-500">Look like a visionary CEO and wear the same black t-shirt every day.</p>
+                <div class="flex flex-1 flex-col justify-end">
+                  <p class="text-sm italic text-gray-500">Black</p>
+                  <p class="text-base font-medium text-gray-900">$32</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+    <footer aria-labelledby="footer-heading" class="border-t border-gray-200 bg-white">
+      <h2 id="footer-heading" class="sr-only">Footer</h2>
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="py-20">
+          <div class="grid grid-cols-1 md:grid-flow-col md:auto-rows-min md:grid-cols-12 md:gap-x-8 md:gap-y-16">
+            <div class="col-span-1 md:col-span-2 lg:col-start-1 lg:row-start-1">
+              <img src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
+            </div>
+            <div class="col-span-6 mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8 md:col-start-3 md:row-start-1 md:mt-0 lg:col-span-6 lg:col-start-2">
+              <div class="grid grid-cols-1 gap-y-12 sm:col-span-2 sm:grid-cols-2 sm:gap-x-8">
+                <div>
+                  <h3 class="text-sm font-medium text-gray-900">Products</h3>
+                  <ul role="list" class="mt-6 space-y-6">
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Bags</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Tees</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Objects</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Home Goods</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Accessories</a>
+                    </li>
+                  </ul>
+                </div>
+                <div>
+                  <h3 class="text-sm font-medium text-gray-900">Company</h3>
+                  <ul role="list" class="mt-6 space-y-6">
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Who we are</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Sustainability</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Press</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Careers</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Terms &amp; Conditions</a>
+                    </li>
+                    <li class="text-sm">
+                      <a href="#" class="text-gray-500 hover:text-gray-600">Privacy</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div>
+                <h3 class="text-sm font-medium text-gray-900">Customer Service</h3>
+                <ul role="list" class="mt-6 space-y-6">
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">Contact</a>
+                  </li>
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">Shipping</a>
+                  </li>
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">Returns</a>
+                  </li>
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">Warranty</a>
+                  </li>
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">Secure Payments</a>
+                  </li>
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">FAQ</a>
+                  </li>
+                  <li class="text-sm">
+                    <a href="#" class="text-gray-500 hover:text-gray-600">Find a store</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="mt-12 md:col-span-8 md:col-start-3 md:row-start-2 md:mt-0 lg:col-span-4 lg:col-start-9 lg:row-start-1">
+              <h3 class="text-sm font-medium text-gray-900">Sign up for our newsletter</h3>
+              <p class="mt-6 text-sm text-gray-500">The latest deals and savings, sent to your inbox weekly.</p>
+              <form class="mt-2 flex sm:max-w-md">
+                <label for="email-address" class="sr-only">Email address</label>
+                <input id="email-address" type="text" autocomplete="email" required class="w-full min-w-0 appearance-none rounded-md border border-gray-300 bg-white py-2 px-4 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                <div class="ml-4 flex-shrink-0">
+                  <button type="submit" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Sign up</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-gray-100 py-10 text-center">
+          <p class="text-sm text-gray-500">&copy; 2021 Your Company, Inc. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  </div>
+</div>