tailwind_dsl 0.0.3 → 0.0.4

data/.components/tui/ecommerce/page/category-pages/01.html

@@ -0,0 +1,1242 @@
+<!--
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+      require('@tailwindcss/aspect-ratio'),
+    ],
+  }
+  ```
+-->
+<div class="bg-gray-50">
+  <div>
+    <!--
+      Mobile menu
+
+      Off-canvas menu for mobile, show/hide based on off-canvas menu state.
+    -->
+    <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+      <!--
+        Off-canvas menu backdrop, show/hide based on off-canvas menu state.
+
+        Entering: "transition-opacity ease-linear duration-300"
+          From: "opacity-0"
+          To: "opacity-100"
+        Leaving: "transition-opacity ease-linear duration-300"
+          From: "opacity-100"
+          To: "opacity-0"
+      -->
+      <div class="fixed inset-0 bg-black bg-opacity-25"></div>
+
+      <div class="fixed inset-0 z-40 flex">
+        <!--
+          Off-canvas menu, show/hide based on off-canvas menu state.
+
+          Entering: "transition ease-in-out duration-300 transform"
+            From: "-translate-x-full"
+            To: "translate-x-0"
+          Leaving: "transition ease-in-out duration-300 transform"
+            From: "translate-x-0"
+            To: "-translate-x-full"
+        -->
+        <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>
+              <!-- Heroicon name: outline/x-mark -->
+              <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>
+
+          <!-- Links -->
+          <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">
+                <!-- Selected: "text-indigo-600 border-indigo-600", Not Selected: "text-gray-900 border-transparent" -->
+                <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>
+
+                <!-- Selected: "text-indigo-600 border-indigo-600", Not Selected: "text-gray-900 border-transparent" -->
+                <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>
+
+            <!-- 'Women' tab panel, show/hide based on tab state. -->
+            <div id="tabs-1-panel-1" class="space-y-12 px-4 py-6" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
+              <div class="grid grid-cols-2 gap-x-4 gap-y-10">
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md 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 text-sm 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 text-sm text-gray-500">Shop now</p>
+                </div>
+
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md 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 text-sm 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 text-sm text-gray-500">Shop now</p>
+                </div>
+
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-03.jpg" alt="Model wearing minimalist watch with black wristband and white watch face." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block text-sm font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    Accessories
+                  </a>
+                  <p aria-hidden="true" class="mt-1 text-sm text-gray-500">Shop now</p>
+                </div>
+
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-04.jpg" alt="Model opening tan leather long wallet with credit card pockets and cash pouch." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block text-sm font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    Carry
+                  </a>
+                  <p aria-hidden="true" class="mt-1 text-sm text-gray-500">Shop now</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- 'Men' tab panel, show/hide based on tab state. -->
+            <div id="tabs-1-panel-2" class="space-y-12 px-4 py-6" aria-labelledby="tabs-1-tab-2" role="tabpanel" tabindex="0">
+              <div class="grid grid-cols-2 gap-x-4 gap-y-10">
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-01.jpg" alt="Hats and sweaters on wood shelves next to various colors of t-shirts on hangers." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block text-sm 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 text-sm text-gray-500">Shop now</p>
+                </div>
+
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-02.jpg" alt="Model wearing light heather gray t-shirt." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block text-sm 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 text-sm text-gray-500">Shop now</p>
+                </div>
+
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-03.jpg" alt="Grey 6-panel baseball hat with black brim, black mountain graphic on front, and light heather gray body." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block text-sm font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    Accessories
+                  </a>
+                  <p aria-hidden="true" class="mt-1 text-sm text-gray-500">Shop now</p>
+                </div>
+
+                <div class="group relative">
+                  <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                    <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-04.jpg" alt="Model putting folded cash into slim card holder olive leather wallet with hand stitching." class="object-cover object-center">
+                  </div>
+                  <a href="#" class="mt-6 block text-sm font-medium text-gray-900">
+                    <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                    Carry
+                  </a>
+                  <p aria-hidden="true" class="mt-1 text-sm text-gray-500">Shop now</p>
+                </div>
+              </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">Create an account</a>
+            </div>
+            <div class="flow-root">
+              <a href="#" class="-m-2 block p-2 font-medium text-gray-900">Sign in</a>
+            </div>
+          </div>
+
+          <div class="space-y-6 border-t border-gray-200 py-6 px-4">
+            <!-- Currency selector -->
+            <form>
+              <div class="inline-block">
+                <label for="mobile-currency" class="sr-only">Currency</label>
+                <div class="group relative -ml-2 rounded-md border-transparent focus-within:ring-2 focus-within:ring-white">
+                  <select id="mobile-currency" name="currency" class="flex items-center rounded-md border-transparent bg-none py-0.5 pl-2 pr-5 text-sm font-medium text-gray-700 focus:border-transparent focus:outline-none focus:ring-0 group-hover:text-gray-800">
+                    <option>CAD</option>
+
+                    <option>USD</option>
+
+                    <option>AUD</option>
+
+                    <option>EUR</option>
+
+                    <option>GBP</option>
+                  </select>
+                  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center">
+                    <!-- Heroicon name: mini/chevron-down -->
+                    <svg class="h-5 w-5 text-gray-500" 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>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <header class="relative">
+      <nav aria-label="Top">
+        <!-- Top navigation -->
+        <div class="bg-gray-900">
+          <div class="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+            <!-- Currency selector -->
+            <form>
+              <div>
+                <label for="desktop-currency" class="sr-only">Currency</label>
+                <div class="group relative -ml-2 rounded-md border-transparent bg-gray-900 focus-within:ring-2 focus-within:ring-white">
+                  <select id="desktop-currency" name="currency" class="flex items-center rounded-md border-transparent bg-gray-900 bg-none py-0.5 pl-2 pr-5 text-sm font-medium text-white focus:border-transparent focus:outline-none focus:ring-0 group-hover:text-gray-100">
+                    <option>CAD</option>
+
+                    <option>USD</option>
+
+                    <option>AUD</option>
+
+                    <option>EUR</option>
+
+                    <option>GBP</option>
+                  </select>
+                  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center">
+                    <!-- Heroicon name: mini/chevron-down -->
+                    <svg class="h-5 w-5 text-gray-300" 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>
+                  </div>
+                </div>
+              </div>
+            </form>
+
+            <div class="flex items-center space-x-6">
+              <a href="#" class="text-sm font-medium text-white hover:text-gray-100">Sign in</a>
+              <a href="#" class="text-sm font-medium text-white hover:text-gray-100">Create an account</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Secondary navigation -->
+        <div class="bg-white shadow-sm">
+          <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="flex h-16 items-center justify-between">
+              <!-- Logo (lg+) -->
+              <div class="hidden lg:flex lg:flex-1 lg:items-center">
+                <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 h-full lg:flex">
+                <!-- Flyout menus -->
+                <div class="inset-x-0 bottom-0 px-4">
+                  <div class="flex h-full justify-center space-x-8">
+                    <div class="flex">
+                      <div class="relative flex">
+                        <!-- Item active: "text-indigo-600", Item inactive: "text-gray-700 hover:text-gray-800" -->
+                        <button type="button" class="text-gray-700 hover:text-gray-800 relative flex items-center justify-center text-sm font-medium transition-colors duration-200 ease-out" aria-expanded="false">
+                          Women
+                          <!-- Open: "bg-indigo-600", Closed: "" -->
+                          <span class="absolute inset-x-0 -bottom-px z-30 h-0.5 transition duration-200 ease-out" aria-hidden="true"></span>
+                        </button>
+                      </div>
+
+                      <!--
+                        'Women' flyout menu, show/hide based on flyout menu state.
+
+                        Entering: "transition ease-out duration-200"
+                          From: "opacity-0"
+                          To: "opacity-100"
+                        Leaving: "transition ease-in duration-150"
+                          From: "opacity-100"
+                          To: "opacity-0"
+                      -->
+                      <div class="absolute inset-x-0 top-full z-20 bg-white text-sm text-gray-500">
+                        <!-- Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow -->
+                        <div class="absolute inset-0 top-1/2 bg-white shadow" aria-hidden="true"></div>
+                        <!-- Fake border when menu is open -->
+                        <div class="absolute inset-0 top-0 mx-auto h-px max-w-7xl px-8" aria-hidden="true">
+                          <!-- Open: "bg-gray-200", Closed: "bg-transparent" -->
+                          <div class="bg-transparent h-px w-full transition-colors duration-200 ease-out"></div>
+                        </div>
+
+                        <div class="relative">
+                          <div class="mx-auto max-w-7xl px-8">
+                            <div class="grid grid-cols-4 gap-y-10 gap-x-8 py-16">
+                              <div class="group relative">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md 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-4 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">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md 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-4 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 class="group relative">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                                  <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-03.jpg" alt="Model wearing minimalist watch with black wristband and white watch face." class="object-cover object-center">
+                                </div>
+                                <a href="#" class="mt-4 block font-medium text-gray-900">
+                                  <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                  Accessories
+                                </a>
+                                <p aria-hidden="true" class="mt-1">Shop now</p>
+                              </div>
+
+                              <div class="group relative">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                                  <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-category-04.jpg" alt="Model opening tan leather long wallet with credit card pockets and cash pouch." class="object-cover object-center">
+                                </div>
+                                <a href="#" class="mt-4 block font-medium text-gray-900">
+                                  <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                  Carry
+                                </a>
+                                <p aria-hidden="true" class="mt-1">Shop now</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="flex">
+                      <div class="relative flex">
+                        <!-- Item active: "text-indigo-600", Item inactive: "text-gray-700 hover:text-gray-800" -->
+                        <button type="button" class="text-gray-700 hover:text-gray-800 relative flex items-center justify-center text-sm font-medium transition-colors duration-200 ease-out" aria-expanded="false">
+                          Men
+                          <!-- Open: "bg-indigo-600", Closed: "" -->
+                          <span class="absolute inset-x-0 -bottom-px z-30 h-0.5 transition duration-200 ease-out" aria-hidden="true"></span>
+                        </button>
+                      </div>
+
+                      <!--
+                        'Women' flyout menu, show/hide based on flyout menu state.
+
+                        Entering: "transition ease-out duration-200"
+                          From: "opacity-0"
+                          To: "opacity-100"
+                        Leaving: "transition ease-in duration-150"
+                          From: "opacity-100"
+                          To: "opacity-0"
+                      -->
+                      <div class="absolute inset-x-0 top-full z-20 bg-white text-sm text-gray-500">
+                        <!-- Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow -->
+                        <div class="absolute inset-0 top-1/2 bg-white shadow" aria-hidden="true"></div>
+                        <!-- Fake border when menu is open -->
+                        <div class="absolute inset-0 top-0 mx-auto h-px max-w-7xl px-8" aria-hidden="true">
+                          <!-- Open: "bg-gray-200", Closed: "bg-transparent" -->
+                          <div class="bg-transparent h-px w-full transition-colors duration-200 ease-out"></div>
+                        </div>
+
+                        <div class="relative">
+                          <div class="mx-auto max-w-7xl px-8">
+                            <div class="grid grid-cols-4 gap-y-10 gap-x-8 py-16">
+                              <div class="group relative">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                                  <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-01.jpg" alt="Hats and sweaters on wood shelves next to various colors of t-shirts on hangers." class="object-cover object-center">
+                                </div>
+                                <a href="#" class="mt-4 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">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                                  <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-02.jpg" alt="Model wearing light heather gray t-shirt." class="object-cover object-center">
+                                </div>
+                                <a href="#" class="mt-4 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 class="group relative">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                                  <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-03.jpg" alt="Grey 6-panel baseball hat with black brim, black mountain graphic on front, and light heather gray body." class="object-cover object-center">
+                                </div>
+                                <a href="#" class="mt-4 block font-medium text-gray-900">
+                                  <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                  Accessories
+                                </a>
+                                <p aria-hidden="true" class="mt-1">Shop now</p>
+                              </div>
+
+                              <div class="group relative">
+                                <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-md bg-gray-100 group-hover:opacity-75">
+                                  <img src="https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-04.jpg" alt="Model putting folded cash into slim card holder olive leather wallet with hand stitching." class="object-cover object-center">
+                                </div>
+                                <a href="#" class="mt-4 block font-medium text-gray-900">
+                                  <span class="absolute inset-0 z-10" aria-hidden="true"></span>
+                                  Carry
+                                </a>
+                                <p aria-hidden="true" class="mt-1">Shop now</p>
+                              </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>
+
+              <!-- Mobile menu and search (lg-) -->
+              <div class="flex flex-1 items-center lg:hidden">
+                <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
+                <button type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400">
+                  <span class="sr-only">Open menu</span>
+                  <!-- Heroicon name: outline/bars-3 -->
+                  <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>
+
+                <!-- Search -->
+                <a href="#" class="ml-2 p-2 text-gray-400 hover:text-gray-500">
+                  <span class="sr-only">Search</span>
+                  <!-- Heroicon name: outline/magnifying-glass -->
+                  <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>
+
+              <!-- Logo (lg-) -->
+              <a href="#" class="lg:hidden">
+                <span class="sr-only">Your Company</span>
+                <img src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
+              </a>
+
+              <div class="flex flex-1 items-center justify-end">
+                <a href="#" class="hidden text-sm font-medium text-gray-700 hover:text-gray-800 lg:block">Search</a>
+
+                <div class="flex items-center lg:ml-8">
+                  <!-- Help -->
+                  <a href="#" class="p-2 text-gray-400 hover:text-gray-500 lg:hidden">
+                    <span class="sr-only">Help</span>
+                    <!-- Heroicon name: outline/question-mark-circle -->
+                    <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="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                    </svg>
+                  </a>
+                  <a href="#" class="hidden text-sm font-medium text-gray-700 hover:text-gray-800 lg:block">Help</a>
+
+                  <!-- Cart -->
+                  <div class="ml-4 flow-root lg:ml-8">
+                    <a href="#" class="group -m-2 flex items-center p-2">
+                      <!-- Heroicon name: outline/shopping-bag -->
+                      <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>
+          </div>
+        </div>
+      </nav>
+    </header>
+  </div>
+
+  <div>
+    <!--
+      Mobile filter dialog
+
+      Off-canvas menu for mobile, show/hide based on off-canvas menu state.
+    -->
+    <div class="relative z-40 sm:hidden" role="dialog" aria-modal="true">
+      <!--
+        Off-canvas menu backdrop, show/hide based on off-canvas menu state.
+
+        Entering: "transition-opacity ease-linear duration-300"
+          From: "opacity-0"
+          To: "opacity-100"
+        Leaving: "transition-opacity ease-linear duration-300"
+          From: "opacity-100"
+          To: "opacity-0"
+      -->
+      <div class="fixed inset-0 bg-black bg-opacity-25"></div>
+
+      <div class="fixed inset-0 z-40 flex">
+        <!--
+          Off-canvas menu, show/hide based on off-canvas menu state.
+
+          Entering: "transition ease-in-out duration-300 transform"
+            From: "translate-x-full"
+            To: "translate-x-0"
+          Leaving: "transition ease-in-out duration-300 transform"
+            From: "translate-x-0"
+            To: "translate-x-full"
+        -->
+        <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 rounded-md bg-white p-2 text-gray-400 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+              <span class="sr-only">Close menu</span>
+              <!-- Heroicon name: outline/x-mark -->
+              <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>
+
+          <!-- Filters -->
+          <form class="mt-4">
+            <div class="border-t border-gray-200 px-4 py-6">
+              <h3 class="-mx-2 -my-3 flow-root">
+                <!-- Expand/collapse question button -->
+                <button type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-sm text-gray-400" aria-controls="filter-section-0" aria-expanded="false">
+                  <span class="font-medium text-gray-900">Category</span>
+                  <span class="ml-6 flex items-center">
+                    <!--
+                      Expand/collapse icon, toggle classes based on question open state.
+
+                      Heroicon name: mini/chevron-down
+
+                      Open: "-rotate-180", Closed: "rotate-0"
+                    -->
+                    <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>
+              </h3>
+              <div class="pt-6" id="filter-section-0">
+                <div class="space-y-6">
+                  <div class="flex items-center">
+                    <input id="filter-mobile-category-0" name="category[]" value="tees" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-category-0" class="ml-3 text-sm text-gray-500">Tees</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-category-1" name="category[]" value="crewnecks" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-category-1" class="ml-3 text-sm text-gray-500">Crewnecks</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-category-2" name="category[]" value="hats" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-category-2" class="ml-3 text-sm text-gray-500">Hats</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-category-3" name="category[]" value="bundles" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-category-3" class="ml-3 text-sm text-gray-500">Bundles</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-category-4" name="category[]" value="carry" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-category-4" class="ml-3 text-sm text-gray-500">Carry</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-category-5" name="category[]" value="objects" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-category-5" class="ml-3 text-sm text-gray-500">Objects</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="border-t border-gray-200 px-4 py-6">
+              <h3 class="-mx-2 -my-3 flow-root">
+                <!-- Expand/collapse question button -->
+                <button type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-sm text-gray-400" aria-controls="filter-section-1" aria-expanded="false">
+                  <span class="font-medium text-gray-900">Brand</span>
+                  <span class="ml-6 flex items-center">
+                    <!--
+                      Expand/collapse icon, toggle classes based on question open state.
+
+                      Heroicon name: mini/chevron-down
+
+                      Open: "-rotate-180", Closed: "rotate-0"
+                    -->
+                    <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>
+              </h3>
+              <div class="pt-6" id="filter-section-1">
+                <div class="space-y-6">
+                  <div class="flex items-center">
+                    <input id="filter-mobile-brand-0" name="brand[]" value="clothing-company" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-brand-0" class="ml-3 text-sm text-gray-500">Clothing Company</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-brand-1" name="brand[]" value="fashion-inc" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-brand-1" class="ml-3 text-sm text-gray-500">Fashion Inc.</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-brand-2" name="brand[]" value="shoes-n-more" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-brand-2" class="ml-3 text-sm text-gray-500">Shoes &#039;n More</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-brand-3" name="brand[]" value="supplies-n-stuff" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-brand-3" class="ml-3 text-sm text-gray-500">Supplies &#039;n Stuff</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="border-t border-gray-200 px-4 py-6">
+              <h3 class="-mx-2 -my-3 flow-root">
+                <!-- Expand/collapse question button -->
+                <button type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-sm text-gray-400" aria-controls="filter-section-2" aria-expanded="false">
+                  <span class="font-medium text-gray-900">Color</span>
+                  <span class="ml-6 flex items-center">
+                    <!--
+                      Expand/collapse icon, toggle classes based on question open state.
+
+                      Heroicon name: mini/chevron-down
+
+                      Open: "-rotate-180", Closed: "rotate-0"
+                    -->
+                    <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>
+              </h3>
+              <div class="pt-6" id="filter-section-2">
+                <div class="space-y-6">
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-color-0" class="ml-3 text-sm text-gray-500">White</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-color-1" name="color[]" value="black" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-color-1" class="ml-3 text-sm text-gray-500">Black</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-color-2" name="color[]" value="grey" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-color-2" class="ml-3 text-sm text-gray-500">Grey</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-color-3" name="color[]" value="blue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-color-3" class="ml-3 text-sm text-gray-500">Blue</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-color-4" name="color[]" value="olive" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-color-4" class="ml-3 text-sm text-gray-500">Olive</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-color-5" name="color[]" value="tan" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                    <label for="filter-mobile-color-5" class="ml-3 text-sm text-gray-500">Tan</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="border-t border-gray-200 px-4 py-6">
+              <h3 class="-mx-2 -my-3 flow-root">
+                <!-- Expand/collapse question button -->
+                <button type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-sm text-gray-400" aria-controls="filter-section-3" aria-expanded="false">
+                  <span class="font-medium text-gray-900">Sizes</span>
+                  <span class="ml-6 flex items-center">
+                    <!--
+                      Expand/collapse icon, toggle classes based on question open state.
+
+                      Heroicon name: mini/chevron-down
+
+                      Open: "-rotate-180", Closed: "rotate-0"
+                    -->
+                    <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>
+              </h3>
+              <div class="pt-6" id="filter-section-3">
+                <div class="space-y-6">
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-sizes-0" class="ml-3 text-sm text-gray-500">XS</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-sizes-1" class="ml-3 text-sm text-gray-500">S</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-sizes-2" class="ml-3 text-sm text-gray-500">M</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-sizes-3" class="ml-3 text-sm text-gray-500">L</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-sizes-4" class="ml-3 text-sm text-gray-500">XL</label>
+                  </div>
+
+                  <div class="flex items-center">
+                    <input id="filter-mobile-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="filter-mobile-sizes-5" class="ml-3 text-sm text-gray-500">2XL</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <main>
+      <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+        <div class="py-24 text-center">
+          <h1 class="text-4xl font-bold tracking-tight text-gray-900">New Arrivals</h1>
+          <p class="mx-auto mt-4 max-w-3xl text-base text-gray-500">Thoughtfully designed objects for the workspace, home, and travel.</p>
+        </div>
+
+        <!-- Filters -->
+        <section aria-labelledby="filter-heading" class="border-t border-gray-200 pt-6">
+          <h2 id="filter-heading" class="sr-only">Product filters</h2>
+
+          <div class="flex items-center justify-between">
+            <div class="relative inline-block text-left">
+              <div>
+                <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
+                  Sort
+                  <!-- Heroicon name: mini/chevron-down -->
+                  <svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" 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>
+                </button>
+              </div>
+
+              <!--
+                Dropdown menu, show/hide based on menu state.
+
+                Entering: "transition ease-out duration-100"
+                  From: "transform opacity-0 scale-95"
+                  To: "transform opacity-100 scale-100"
+                Leaving: "transition ease-in duration-75"
+                  From: "transform opacity-100 scale-100"
+                  To: "transform opacity-0 scale-95"
+              -->
+              <div class="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                <div class="py-1" role="none">
+                  <!-- Active: "bg-gray-100", Not Active: "" -->
+                  <a href="#" class="block px-4 py-2 text-sm font-medium text-gray-900" role="menuitem" tabindex="-1" id="menu-item-0">Most Popular</a>
+
+                  <a href="#" class="block px-4 py-2 text-sm font-medium text-gray-900" role="menuitem" tabindex="-1" id="menu-item-1">Best Rating</a>
+
+                  <a href="#" class="block px-4 py-2 text-sm font-medium text-gray-900" role="menuitem" tabindex="-1" id="menu-item-2">Newest</a>
+
+                  <a href="#" class="block px-4 py-2 text-sm font-medium text-gray-900" role="menuitem" tabindex="-1" id="menu-item-3">Price: Low to High</a>
+
+                  <a href="#" class="block px-4 py-2 text-sm font-medium text-gray-900" role="menuitem" tabindex="-1" id="menu-item-4">Price: High to Low</a>
+                </div>
+              </div>
+            </div>
+
+            <!-- Mobile filter dialog toggle, controls the 'mobileFilterDialogOpen' state. -->
+            <button type="button" class="inline-block text-sm font-medium text-gray-700 hover:text-gray-900 sm:hidden">Filters</button>
+
+            <div class="hidden sm:flex sm:items-baseline sm:space-x-8">
+              <div id="menu" class="relative inline-block text-left">
+                <div>
+                  <button type="button" class="group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
+                    <span>Category</span>
+
+                    <span class="ml-1.5 rounded bg-gray-200 py-0.5 px-1.5 text-xs font-semibold tabular-nums text-gray-700">1</span>
+                    <!-- Heroicon name: mini/chevron-down -->
+                    <svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" 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>
+                  </button>
+                </div>
+
+                <!--
+                  Entering: "transition ease-out duration-100"
+                    From: "transform opacity-0 scale-95"
+                    To: "transform opacity-100 scale-100"
+                  Leaving: "transition ease-in duration-75"
+                    From: "transform opacity-100 scale-100"
+                    To: "transform opacity-0 scale-95"
+                -->
+                <div class="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <form class="space-y-4">
+                    <div class="flex items-center">
+                      <input id="filter-category-0" name="category[]" value="tees" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-category-0" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Tees</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-category-1" name="category[]" value="crewnecks" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-category-1" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Crewnecks</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-category-2" name="category[]" value="hats" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-category-2" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Hats</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-category-3" name="category[]" value="bundles" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-category-3" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Bundles</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-category-4" name="category[]" value="carry" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-category-4" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Carry</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-category-5" name="category[]" value="objects" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-category-5" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Objects</label>
+                    </div>
+                  </form>
+                </div>
+              </div>
+
+              <div id="menu" class="relative inline-block text-left">
+                <div>
+                  <button type="button" class="group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
+                    <span>Brand</span>
+                    <!-- Heroicon name: mini/chevron-down -->
+                    <svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" 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>
+                  </button>
+                </div>
+
+                <!--
+                  Entering: "transition ease-out duration-100"
+                    From: "transform opacity-0 scale-95"
+                    To: "transform opacity-100 scale-100"
+                  Leaving: "transition ease-in duration-75"
+                    From: "transform opacity-100 scale-100"
+                    To: "transform opacity-0 scale-95"
+                -->
+                <div class="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <form class="space-y-4">
+                    <div class="flex items-center">
+                      <input id="filter-brand-0" name="brand[]" value="clothing-company" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-brand-0" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Clothing Company</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-brand-1" name="brand[]" value="fashion-inc" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-brand-1" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Fashion Inc.</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-brand-2" name="brand[]" value="shoes-n-more" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-brand-2" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Shoes &#039;n More</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-brand-3" name="brand[]" value="supplies-n-stuff" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-brand-3" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Supplies &#039;n Stuff</label>
+                    </div>
+                  </form>
+                </div>
+              </div>
+
+              <div id="menu" class="relative inline-block text-left">
+                <div>
+                  <button type="button" class="group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
+                    <span>Color</span>
+                    <!-- Heroicon name: mini/chevron-down -->
+                    <svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" 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>
+                  </button>
+                </div>
+
+                <!--
+                  Entering: "transition ease-out duration-100"
+                    From: "transform opacity-0 scale-95"
+                    To: "transform opacity-100 scale-100"
+                  Leaving: "transition ease-in duration-75"
+                    From: "transform opacity-100 scale-100"
+                    To: "transform opacity-0 scale-95"
+                -->
+                <div class="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <form class="space-y-4">
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-color-0" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">White</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-color-1" name="color[]" value="black" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-color-1" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Black</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-color-2" name="color[]" value="grey" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-color-2" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Grey</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-color-3" name="color[]" value="blue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-color-3" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Blue</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-color-4" name="color[]" value="olive" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-color-4" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Olive</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-color-5" name="color[]" value="tan" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                      <label for="filter-color-5" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">Tan</label>
+                    </div>
+                  </form>
+                </div>
+              </div>
+
+              <div id="menu" class="relative inline-block text-left">
+                <div>
+                  <button type="button" class="group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
+                    <span>Sizes</span>
+                    <!-- Heroicon name: mini/chevron-down -->
+                    <svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" 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>
+                  </button>
+                </div>
+
+                <!--
+                  Entering: "transition ease-out duration-100"
+                    From: "transform opacity-0 scale-95"
+                    To: "transform opacity-100 scale-100"
+                  Leaving: "transition ease-in duration-75"
+                    From: "transform opacity-100 scale-100"
+                    To: "transform opacity-0 scale-95"
+                -->
+                <div class="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <form class="space-y-4">
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-sizes-0" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">XS</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-sizes-1" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">S</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-sizes-2" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">M</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-sizes-3" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">L</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-sizes-4" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">XL</label>
+                    </div>
+
+                    <div class="flex items-center">
+                      <input id="filter-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="filter-sizes-5" class="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900">2XL</label>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Product grid -->
+        <section aria-labelledby="products-heading" class="mt-8">
+          <h2 id="products-heading" class="sr-only">Products</h2>
+
+          <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
+            <a href="#" class="group">
+              <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg sm:aspect-w-2 sm:aspect-h-3">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-01.jpg" alt="Person using a pen to cross a task off a productivity paper card." class="h-full w-full object-cover object-center group-hover:opacity-75">
+              </div>
+              <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+                <h3>Focus Paper Refill</h3>
+                <p>$13</p>
+              </div>
+              <p class="mt-1 text-sm italic text-gray-500">3 sizes available</p>
+            </a>
+
+            <a href="#" class="group">
+              <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg sm:aspect-w-2 sm:aspect-h-3">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-02.jpg" alt="Paper card sitting upright in walnut card holder on desk." class="h-full w-full object-cover object-center group-hover:opacity-75">
+              </div>
+              <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+                <h3>Focus Card Holder</h3>
+                <p>$64</p>
+              </div>
+              <p class="mt-1 text-sm italic text-gray-500">Walnut</p>
+            </a>
+
+            <a href="#" class="group">
+              <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg sm:aspect-w-2 sm:aspect-h-3">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-03.jpg" alt="Textured gray felt pouch for paper cards with snap button flap and elastic pen holder loop." class="h-full w-full object-cover object-center group-hover:opacity-75">
+              </div>
+              <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+                <h3>Focus Carry Pouch</h3>
+                <p>$32</p>
+              </div>
+              <p class="mt-1 text-sm italic text-gray-500">Heather Gray</p>
+            </a>
+
+            <!-- More products... -->
+          </div>
+        </section>
+
+        <section aria-labelledby="featured-heading" class="relative mt-16 overflow-hidden rounded-lg lg:h-96">
+          <div class="absolute inset-0">
+            <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-featured-collection.jpg" alt="" class="h-full w-full object-cover object-center">
+          </div>
+          <div aria-hidden="true" class="relative h-96 w-full lg:hidden"></div>
+          <div aria-hidden="true" class="relative h-32 w-full lg:hidden"></div>
+          <div class="absolute inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-black bg-opacity-75 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-y-0 lg:inset-x-auto lg:w-96 lg:flex-col lg:items-start lg:rounded-tl-lg lg:rounded-br-none">
+            <div>
+              <h2 id="featured-heading" class="text-xl font-bold text-white">Workspace Collection</h2>
+              <p class="mt-1 text-sm text-gray-300">Upgrade your desk with objects that keep you organized and clear-minded.</p>
+            </div>
+            <a href="#" class="mt-6 flex flex-shrink-0 items-center justify-center rounded-md border border-white border-opacity-25 bg-white bg-opacity-0 py-3 px-4 text-base font-medium text-white hover:bg-opacity-10 sm:mt-0 sm:ml-8 lg:ml-0 lg:w-full">View the collection</a>
+          </div>
+        </section>
+
+        <section aria-labelledby="more-products-heading" class="mt-16 pb-24">
+          <h2 id="more-products-heading" class="sr-only">More products</h2>
+
+          <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
+            <a href="#" class="group">
+              <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg sm:aspect-w-2 sm:aspect-h-3">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-07.jpg" alt="Close up of long kettle spout pouring boiling water into pour-over coffee mug with frothy coffee." class="h-full w-full object-cover object-center group-hover:opacity-75">
+              </div>
+              <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+                <h3>Electric Kettle</h3>
+                <p>$149</p>
+              </div>
+              <p class="mt-1 text-sm italic text-gray-500">Black</p>
+            </a>
+
+            <a href="#" class="group">
+              <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg sm:aspect-w-2 sm:aspect-h-3">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-08.jpg" alt="Extra large black leather workspace pad on desk with computer, wooden shelf, desk organizer, and computer peripherals." class="h-full w-full object-cover object-center group-hover:opacity-75">
+              </div>
+              <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+                <h3>Leather Workspace Pad</h3>
+                <p>$165</p>
+              </div>
+              <p class="mt-1 text-sm italic text-gray-500">Black</p>
+            </a>
+
+            <a href="#" class="group">
+              <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg sm:aspect-w-2 sm:aspect-h-3">
+                <img src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-09.jpg" alt="Leather long wallet held open with hand-stitched card dividers, full-length bill pocket, and simple tab closure." class="h-full w-full object-cover object-center group-hover:opacity-75">
+              </div>
+              <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
+                <h3>Leather Long Wallet</h3>
+                <p>$118</p>
+              </div>
+              <p class="mt-1 text-sm italic text-gray-500">Natural</p>
+            </a>
+
+            <!-- More products... -->
+          </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">
+            <!-- Image section -->
+            <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>
+
+            <!-- Sitemap sections -->
+            <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>
+
+            <!-- Newsletter section -->
+            <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>