
# 📒 Developer style guide for Filters


A column's drop-down filter allows you to filter data at runtime. The drop-down filter displays a column's unique values. To filter data against a column, an end user should click the filter button ( ) in a column header and select any item(s):

![image](https://i.postimg.cc/D0zstgdK/Screenshot-2023-01-04-at-5-07-16-PM.png)

---

## General must known design system guide

### Color 🎨

|  | Background | Border | Active | Inactive |
| --- | --- | --- | --- | --- |
| Color Code in Tailwind | bg-gray-100 | border-gray-200 | bg-green-400 | bg-red-400 | border-slate-300 | bg-white | text-gray-500 |
 

Color of `text` will depend on the `bg` color
| Background | Dark | Light |
| --- | --- | --- |
| Text | Light | Dark |
| Code in Tailwind | text-white | text-gray-500 | text-neutral-800 | text-black | text-neutral-900 |

`Note` : Color of the text `[color]` will depend on the color of the background

### Font

For all Filter font is : **`font-medium`**

## Icon guidelines:

Mostly all the icons are taken from → [Hero Icons](https://heroicons.com/)

`Icon-text-gap` :  We follow a convention of equal margin between the text and the icon as padding in y  axis `py`. and always the margin is given from the side of icon.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

---

## Example of Filter component 👇

Want to see this Avatar in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html

<!--For desktop filter style -->
  <div class="w-100vh m-4 hidden h-80 border border-gray-100 px-6 py-10 md:block lg:px-16 xl:px-32">
  <!-- To Go -->
  <div class="m-auto mb-8 flex flex-row space-x-2">
    <!-- Home -->
    <a href="#" class="font-nunito font-medium text-neutral-900">Home</a>
    <!-- vector -->
    <svg class="mt-1 stroke-slate-300" xmlvgns="http://www.w3.org/2000/svg" width="7" height="12" fill="none"><path fill="#BDBDBD" fill-rule="evenodd" d="M0 11.196 5.36 6 0 .804.828 0 7 6.003.828 12 0 11.196Z" clip-rule="evenodd" /></svg>
    <!-- Marketplace -->
    <a href="#" class="font-nunito font-medium text-gray-400">Marketplace products</a>
  </div>
  <!-- Content -->
  <div class="my-8">
    <!-- Heading -->
    <h3 class="font-nunito leading-2 text-xl font-semibold text-neutral-800">Marketplace Products</h3>
    <!-- paragraph -->
    <p class="font-nunito font-normal leading-7 text-slate-400">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
  </div>
  <!-- Sort -->
  <div class="flex justify-between">
    <!-- Left Part -->
    <div class="flex flex-row items-center space-x-[15px]">
      <!-- Text -->
      <p class="my-2 text-sm font-semibold text-gray-600">Sort by :</p>

      <div class="relative w-fit cursor-pointer">
        <select name="yo" id="" class="h-[40px] w-[120px] cursor-pointer border border-slate-300 bg-white px-5 text-sm font-semibold tracking-[0.2px] text-[#252B42] outline-none lg:h-[58px] lg:w-[155px]">
          <option value="">Popularity</option>
          <option value="">First</option>
          <option value="">Second</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[22px] right-[5px] hidden h-4 bg-white pr-6 lg:block">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </div>
      <div class="relative w-fit cursor-pointer">
        <select name="yo" id="" class="h-[40px] w-[140px] cursor-pointer border border-slate-300 bg-white px-5 text-sm font-semibold tracking-[0.2px] text-[#252B42] outline-none lg:h-[58px] lg:w-[155px]">
          <option value="">Seller Details</option>
          <option value="">First</option>
          <option value="">Second</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[22px] right-[5px] hidden h-4 bg-white pr-6 lg:block">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </div>
      <div class="relative w-fit cursor-pointer">
        <select name="yo" id="" class="h-[40px] w-[100px] cursor-pointer border border-slate-300 bg-white px-5 text-sm font-semibold tracking-[0.2px] text-[#252B42] outline-none lg:h-[58px] lg:w-[155px]">
          <option value="">Budget</option>
          <option value="">First</option>
          <option value="">Second</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[22px] right-[5px] hidden h-4 bg-white pr-6 lg:block">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </div>
      <div class="relative w-fit cursor-pointer">
        <select name="yo" id="" class="h-[40px] w-[140px] cursor-pointer border border-slate-300 bg-white px-5 text-sm font-semibold tracking-[0.2px] text-[#252B42] outline-none lg:h-[58px] lg:w-[155px]">
          <option value="">Delivery Time</option>
          <option value="">First</option>
          <option value="">Second</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[22px] right-[5px] hidden h-4 bg-white pr-6 lg:block">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </div>
    </div>

    <!-- Right Part -->
    <div class="hidden cursor-pointer items-center gap-2 lg:flex xl:gap-5">
      <svg class="w-[40px] xl:h-[54px] xl:w-[55px]" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="0.5" width="54" height="54" rx="5" fill="#E9E9E9" />
        <rect x="16.5" y="16" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
        <rect x="29.5" y="16" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
        <rect x="16.5" y="29" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
        <rect x="29.5" y="29" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
      </svg>
      <svg width="52" height="48" viewBox="0 0 52 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="0.5" y="0.5" width="51" height="47" rx="5" fill="white" />
        <g clip-path="url(#clip0_688_4143)">
          <path d="M19.4234 28.4383L19.4225 28.4374C19.3986 28.4127 19.371 28.3939 19.3417 28.3814L19.5382 27.9216L19.3417 28.3814C19.3124 28.3689 19.2816 28.3626 19.2508 28.3626C19.22 28.3626 19.1892 28.3689 19.1599 28.3814L18.9633 27.9216L19.1599 28.3814C19.1306 28.3939 19.103 28.4127 19.079 28.4374L19.0787 28.4377L17.3598 30.2102L16.9998 30.5814L16.6409 30.2091L16.4231 29.9832C16.423 29.9831 16.4228 29.9829 16.4227 29.9828C16.3745 29.9333 16.3124 29.9084 16.2509 29.9084C16.1893 29.9084 16.127 29.9335 16.0787 29.9832C16.0299 30.0335 16 30.1047 16 30.182C16 30.2593 16.0299 30.3306 16.0787 30.3808L16.8287 31.1535L16.8291 31.1539C16.8531 31.1786 16.8807 31.1974 16.91 31.21C16.91 31.21 16.91 31.21 16.91 31.21L16.7134 31.6697C16.8046 31.7087 16.9022 31.7287 17.0009 31.7287C17.0995 31.7287 17.1972 31.7087 17.2883 31.6697L19.4234 28.4383ZM19.4234 28.4383C19.4474 28.463 19.4672 28.4931 19.481 28.5273L19.9448 28.3405L19.4234 28.4383ZM19.4225 16.0748L19.4234 16.0757C19.4474 16.1004 19.4672 16.1305 19.481 16.1647L19.481 16.1647C19.4948 16.1989 19.5021 16.2361 19.5021 16.274C19.5021 16.312 19.4948 16.3491 19.481 16.3834L19.481 16.3834C19.4672 16.4176 19.4474 16.4477 19.4234 16.4724L19.423 16.4728L17.1731 18.7908L17.1726 18.7913C17.1487 18.816 17.1211 18.8348 17.0918 18.8473C17.0625 18.8598 17.0317 18.8661 17.0009 18.8661C16.9701 18.8661 16.9393 18.8598 16.91 18.8473L16.7134 19.3071L16.91 18.8473C16.8807 18.8348 16.8531 18.816 16.8291 18.7913L16.8287 18.7908L16.0787 18.0182L15.7321 18.3546L16.0787 18.0182C16.0547 17.9934 16.0349 17.9632 16.0211 17.9289C16.0073 17.8946 16 17.8573 16 17.8194C16 17.7814 16.0073 17.7441 16.0211 17.7098C16.0349 17.6755 16.0547 17.6453 16.0787 17.6206L15.7199 17.2723L16.0787 17.6206C16.1027 17.5958 16.1304 17.577 16.1598 17.5645C16.1892 17.552 16.2201 17.5457 16.2509 17.5457C16.2818 17.5457 16.3127 17.552 16.342 17.5645C16.3712 17.577 16.3988 17.5956 16.4227 17.6201C16.4228 17.6203 16.423 17.6204 16.4231 17.6206L16.6409 17.8465L16.9998 18.2188L17.3598 17.8476L19.0787 16.0751L19.079 16.0748C19.103 16.0501 19.1306 16.0313 19.1599 16.0188C19.1892 16.0062 19.22 16 19.2508 16C19.2815 16 19.3124 16.0062 19.3417 16.0188C19.371 16.0313 19.3986 16.0501 19.4225 16.0748ZM19.4225 22.2561L19.4234 22.257C19.4474 22.2817 19.4672 22.3118 19.481 22.346L19.9448 22.1592L19.481 22.346C19.4948 22.3803 19.5021 22.4175 19.5021 22.4554C19.5021 22.4933 19.4948 22.5305 19.481 22.5647L19.9448 22.7515L19.481 22.5647C19.4672 22.5989 19.4474 22.629 19.4234 22.6537L19.423 22.6542L17.1731 24.9722L17.1726 24.9726C17.1487 24.9973 17.1211 25.0161 17.0918 25.0287C17.0625 25.0412 17.0316 25.0474 17.0009 25.0474C16.9701 25.0474 16.9393 25.0412 16.91 25.0286C16.8807 25.0161 16.8531 24.9973 16.8291 24.9726L16.8287 24.9722L16.0787 24.1995C16.0299 24.1492 16 24.078 16 24.0007C16 23.9234 16.0299 23.8521 16.0787 23.8019L15.7199 23.4536L16.0787 23.8019C16.127 23.7521 16.1893 23.7271 16.2509 23.7271C16.3124 23.7271 16.3744 23.752 16.4226 23.8014C16.4228 23.8016 16.423 23.8017 16.4231 23.8019L16.6409 24.0278L16.9998 24.4001L17.3598 24.0289L19.0787 22.2564L19.079 22.2561C19.103 22.2314 19.1306 22.2126 19.1599 22.2001L18.9633 21.7403L19.1599 22.2001C19.1892 22.1876 19.22 22.1813 19.2508 22.1813C19.2815 22.1813 19.3124 22.1876 19.3417 22.2001L19.5382 21.7403L19.3417 22.2001C19.371 22.2126 19.3986 22.2314 19.4225 22.2561ZM22.0007 30.182C22.0007 30.105 22.0305 30.034 22.0791 29.9839C22.1272 29.9343 22.1892 29.9093 22.2506 29.9093H35.75C35.8114 29.9093 35.8735 29.9343 35.9216 29.9839C35.9702 30.034 36 30.105 36 30.182C36 30.2591 35.9702 30.3301 35.9216 30.3801C35.8735 30.4297 35.8114 30.4547 35.75 30.4547H22.2506C22.1892 30.4547 22.1272 30.4297 22.0791 30.3801C22.0305 30.3301 22.0007 30.2591 22.0007 30.182ZM22.0007 24.0007C22.0007 23.9236 22.0305 23.8526 22.0791 23.8026C22.1272 23.753 22.1892 23.728 22.2506 23.728H35.75C35.8114 23.728 35.8735 23.753 35.9216 23.8026C35.9702 23.8526 36 23.9236 36 24.0007C36 24.0777 35.9702 24.1487 35.9216 24.1988C35.8735 24.2484 35.8114 24.2734 35.75 24.2734H22.2506C22.1892 24.2734 22.1272 24.2484 22.0791 24.1988C22.0305 24.1487 22.0007 24.0777 22.0007 24.0007ZM22.0007 17.8194C22.0007 17.7423 22.0305 17.6713 22.0791 17.6213C22.1272 17.5717 22.1892 17.5467 22.2506 17.5467H35.75C35.8114 17.5467 35.8735 17.5717 35.9216 17.6213C35.9702 17.6713 36 17.7423 36 17.8194C36 17.8964 35.9702 17.9674 35.9216 18.0175C35.8735 18.067 35.8114 18.092 35.75 18.092H22.2506C22.1892 18.092 22.1272 18.067 22.0791 18.0175C22.0305 17.9674 22.0007 17.8964 22.0007 17.8194Z" fill="#252B42" stroke="#252B42" />
        </g>
        <defs>
          <clipPath id="clip0_688_4143">
            <rect width="21" height="17" fill="white" transform="translate(15.5 15.5)" />
          </clipPath>
        </defs>
      </svg>
    </div>
  </div>
</div>
<!-- Small Scree -->
<div class="mt-4 flex w-full flex-col md:hidden">
  <div class="flex w-[280px] items-center justify-evenly">
    <h1 class="text-sm font-medium">Home</h1>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-gray-500">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
    <h1 class="text-sm font-medium text-gray-600">Marketplace Products</h1>
  </div>
  <div class="ml-8">
    <h1 class="mt-[28px] text-2xl font-bold text-black">Marketplace Products</h1>
  </div>
  <div class="ml-5 mt-[32px]">
    <h1 class="text-sm font-medium text-gray-500">Sort by:</h1>
  </div>
  <div class="mt-[20px]">
    <div class="relative w-fit">
      <select name="yo" id="" class="ml-[19.5px] h-[74px] w-[290px] cursor-pointer rounded-[7px] border-[1px] border-[#DCDCDC] bg-[#ffffff] pl-[19.5px] font-semibold text-gray-600 shadow-md sm:w-[360px]">
        <option value="yo" selected>Popularity</option>
        <option value="yo">Jeans</option>
        <option value="yo">Shirt</option>
        <option value="yo">Trouser</option>
        <option value="yo">Scarf</option>
      </select>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-7 right-1 h-6 w-6 bg-[#ffffff]">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
      </svg>
    </div>
    <div class="relative w-fit">
      <select name="yo" id="" class="ml-[19.5px] mt-3 h-[74px] w-[290px] cursor-pointer rounded-[7px] border-[1px] border-[#DCDCDC] bg-[#ffffff] pl-[19.5px] font-semibold text-gray-600 shadow-md sm:w-[360px]">
        <option value="yo" selected>Seller Details</option>
        <option value="yo">Jeans</option>
        <option value="yo">Shirt</option>
        <option value="yo">Trouser</option>
        <option value="yo">Scarf</option>
      </select>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-10 right-1 h-6 w-6 bg-[#ffffff]">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
      </svg>
    </div>
    <div class="relative w-fit">
      <select name="yo" id="" class="ml-[19.5px] mt-3 h-[74px] w-[290px] cursor-pointer rounded-[7px] border-[1px] border-[#DCDCDC] bg-[#ffffff] pl-[19.5px] font-semibold text-gray-600 shadow-md sm:w-[360px]">
        <option value="yo" selected>Budget</option>
        <option value="yo">Jeans</option>
        <option value="yo">Shirt</option>
        <option value="yo">Trouser</option>
        <option value="yo">Scarf</option>
      </select>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-10 right-1 h-6 w-6 bg-[#ffffff]">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
      </svg>
    </div>
    <div class="relative w-fit">
      <select name="yo" id="" class="ml-[19.5px] mt-3 h-[74px] w-[290px] cursor-pointer rounded-[7px] border-[1px] border-[#DCDCDC] bg-[#ffffff] pl-[19.5px] font-semibold text-gray-600 shadow-md sm:w-[360px]">
        <option value="yo" selected>Delivery Time</option>
        <option value="yo">Jeans</option>
        <option value="yo">Shirt</option>
        <option value="yo">Trouser</option>
        <option value="yo">Scarf</option>
      </select>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-10 right-1 h-6 w-6 bg-[#ffffff]">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
      </svg>
    </div>
  </div>
</div>
  
<!--For marketplace-filter-2_1 -->
<div class="flex h-[100vh] w-[100vw] items-center justify-center text-center">
  <div
    class="rounded-2xl border bg-white px-6 py-6 text-start dark:border-gray-300"
  >
    <!-- top location -->
    <div class="flex font-bold">
      <h6 class="text-[14px] font-semibold">Home</h6>
      <span class="font-light">
        <svg
          class="h-5 w-6 text-[#BDBDBD]"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5l7 7-7 7"
          ></path>
        </svg>
      </span>
      <span class="text-[14px] font-light text-slate-500"
        >Marketplace Products</span
      >
    </div>

    <hr class="mb-3" />

    <div class="relative mb-3">
      <div
        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
      >
        <svg
          aria-hidden="true"
          class="h-5 w-5 text-gray-500 dark:text-gray-400"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          ></path>
        </svg>
      </div>
      <input
        type="search"
        id="default-search"
        class="focus:border--500 dark:bg-700 block w-full rounded-lg border border-gray-200 bg-gray-50 p-4 pl-10 text-sm text-gray-900 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
        placeholder="Search"
        required
      />
      <!-- <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button> -->
    </div>
    <div>
      <div class="mx-auto mt-4 flex w-[80%] justify-between">
        <div class="flex justify-between gap-6">
          <p
            class="text-[18px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
          >
            Accessories
          </p>
        </div>

        <svg
          class="h-5 w-5 cursor-pointer rounded-full bg-blue-500 p-[2px] text-white"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
          ></path>
        </svg>
      </div>
      <div class="mx-auto mt-2 w-[80%] flex-col text-gray-400">
        <span class="mt-1 block">View All</span>
        <span class="mt-1 block">Bags</span>
        <span class="mt-1 block">Belts</span>
        <span class="mt-1 block">Cosmetics</span>
        <span class="mt-1 block">Hats</span>
        <span class="mt-1 mb-2 block">Jewelry</span>
      </div>
    </div>
    <hr class="mb-3" />

    <div class="mx-auto mt-4 flex w-[80%] justify-between">
      <div class="flex justify-between gap-6">
        <p
          class="mr-4 text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
        >
          Bags
        </p>
      </div>
      <svg
        class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
        ></path>
      </svg>
    </div>
    <div class="mx-auto mt-4 flex w-[80%] justify-between">
      <div class="flex justify-between gap-6">
        <p
          class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
        >
          Clothings
        </p>
      </div>
      <svg
        class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
        ></path>
      </svg>
    </div>
    <div class="mx-auto mt-4 flex w-[80%] justify-between">
      <div class="flex justify-between gap-6">
        <p
          class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
        >
          Entertainement
        </p>
      </div>
      <svg
        class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
        ></path>
      </svg>
    </div>
    <div class="mx-auto mt-4 flex w-[80%] justify-between">
      <div class="flex justify-between gap-6">
        <p
          class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
        >
          Furniture & Decor
        </p>
      </div>
      <svg
        class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
        ></path>
      </svg>
    </div>
    <div class="mx-auto mt-4 flex w-[80%] justify-between">
      <div class="flex justify-between gap-6">
        <p
          class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
        >
          Gadgets
        </p>
      </div>
      <svg
        class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
        ></path>
      </svg>
    </div>
    <div class="mx-auto mt-4 flex w-[80%] justify-between">
      <div class="flex justify-between gap-6">
        <p
          class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]"
        >
          Shoes
        </p>
      </div>
      <svg
        class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
        ></path>
      </svg>
    </div>
  </div>
</div>

<!--For marketplace-1 -->
<div class="flex h-[100vh] w-[100vw] items-center justify-center bg-[#EDEDED]">
    <div class="h-max w-[345px] rounded-[10px] bg-white">
      <div>
        <svg width="345" height="208" viewBox="0 0 345 208" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <rect width="345" height="208" rx="10" fill="url(#pattern0)" />
          <defs>
            <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
              <use xlink:href="#image0_688_4315" transform="translate(0 -0.0600962) scale(0.00144928 0.00240385)" />
            </pattern>
            <image
              id="image0_688_4315"
              width="690"
              height="466"
              xlink:href="data:image/jpeg;base64, "
            />
          </defs>
        </svg>
      </div>
      <div>
        <h4 class="ml-4 mt-4 text-[24px] leading-[24px] tracking-[0.2px] text-[#252B42]">Accessories</h4>
      </div>
  
      <div class="flex flex-col w-[100%]">
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Bags</p>
          </div>
          <p class="text-[#737373] font-medium">103</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Belts</p>
          </div>
          <p class="text-[#737373] font-medium">23</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Cosmetics</p>
          </div>
          <p class="text-[#737373] font-medium">12</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Hats</p>
          </div>
          <p class="text-[#737373] font-medium">22</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Jewelery</p>
          </div>
          <p class="text-[#737373] font-medium">11</p>
        </div>
      </div>
  
      <div class="w-[80%] mx-auto mt-4 border-b border-gray-300"></div>
  
      <div class="flex w-[80%] justify-between my-4 mx-auto">
        <p class="font-medium text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">view all</p>
        <p class="text-[#737373] font-medium">200</p>
      </div>
    </div>
  </div>
  
<!--For marketplace-2 -->
<div class="flex items-center justify-center">
  <div class="h-max rounded-[10px] bg-white">
    <div>
      <svg height="208" class="w-[320px] sm:w-[345px]" viewBox="0 0 345 208" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="345" height="208" rx="10" fill="url(#pattern1)" />
        <defs>
          <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#image0_688_4316" transform="translate(0 -0.0600962) scale(0.00144928 0.00240385)" />
          </pattern>
          <image id="image0_688_4316" width="690" height="466" xlink:href="https://i.ibb.co/hV6nbQM/124.png" />
        </defs>
      </svg>
    </div>
    <div>
      <h4 class="ml-4 mt-4 text-[24px] leading-[24px] tracking-[0.2px] text-[#252B42]">Clothing</h4>
    </div>

    <div class="flex flex-col">
      <div class="mx-auto mt-4 flex w-[80%] justify-between">
        <div class="flex justify-between gap-3">
          <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          <p class="text-[14px] leading-[24px] tracking-[0.2px] text-[#737373]">Bags</p>
        </div>
        <p class="font-medium text-[#737373]">103</p>
      </div>
      <div class="mx-auto mt-4 flex w-[80%] justify-between">
        <div class="flex justify-between gap-3">
          <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          <p class="text-[14px] leading-[24px] tracking-[0.2px] text-[#737373]">Belts</p>
        </div>
        <p class="font-medium text-[#737373]">23</p>
      </div>
      <div class="mx-auto mt-4 flex w-[80%] justify-between">
        <div class="flex justify-between gap-3">
          <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          <p class="text-[14px] leading-[24px] tracking-[0.2px] text-[#737373]">Cosmetics</p>
        </div>
        <p class="font-medium text-[#737373]">12</p>
      </div>
      <div class="mx-auto mt-4 flex w-[80%] justify-between">
        <div class="flex justify-between gap-3">
          <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          <p class="text-[14px] leading-[24px] tracking-[0.2px] text-[#737373]">Hats</p>
        </div>
        <p class="font-medium text-[#737373]">22</p>
      </div>
      <div class="mx-auto mt-4 flex w-[80%] justify-between">
        <div class="flex justify-between gap-3">
          <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          <p class="text-[14px] leading-[24px] tracking-[0.2px] text-[#737373]">Jewelery</p>
        </div>
        <p class="font-medium text-[#737373]">11</p>
      </div>
    </div>

    <div class="mx-auto mt-4 w-[80%] border-b border-gray-300"></div>

    <div class="my-4 mx-auto flex w-[80%] justify-between">
      <p class="text-[14px] font-medium leading-[24px] tracking-[0.2px] text-[#737373]">view all</p>
      <p class="font-medium text-[#737373]">200</p>
    </div>
  </div>
</div>
<!--For marketplace-3 -->
<div class="flex h-[100vh] w-[100vw] items-center justify-center bg-[#EDEDED]">
    <div class="h-max w-[345px] rounded-[10px] bg-white">
      <div>
        <svg width="345" height="208" viewBox="0 0 345 208" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <rect width="345" height="208" rx="10" fill="url(#pattern0)" />
          <defs>
            <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
              <use xlink:href="#image0_688_4315" transform="translate(0 -0.0600962) scale(0.00144928 0.00240385)" />
            </pattern>
            <image
              id="image0_688_4315"
              width="690"
              height="466"
              xlink:href="https://i.ibb.co/hRGn808/11.png"
              
            />
          </defs>
        </svg>
      </div>
      <div>
        <h4 class="ml-4 mt-4 text-[24px] leading-[24px] tracking-[0.2px] text-[#252B42]">Entertainement</h4>
      </div>
  
      <div class="flex flex-col w-[100%]">
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Bags</p>
          </div>
          <p class="text-[#737373] font-medium">103</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Belts</p>
          </div>
          <p class="text-[#737373] font-medium">23</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Cosmetics</p>
          </div>
          <p class="text-[#737373] font-medium">12</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Hats</p>
          </div>
          <p class="text-[#737373] font-medium">22</p>
        </div>
        <div class="mx-auto mt-4 flex w-[80%] justify-between">
          <div class="flex justify-between gap-3">
            <svg class="h-5 w-5 p-[2px] cursor-pointer rounded-full bg-[#F1F1F1] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            <p class="text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">Jewelery</p>
          </div>
          <p class="text-[#737373] font-medium">11</p>
        </div>
      </div>
  
      <div class="w-[80%] mx-auto mt-4 border-b border-gray-300"></div>
  
      <div class="flex w-[80%] justify-between my-4 mx-auto">
        <p class="font-medium text-[#737373] text-[14px] leading-[24px] tracking-[0.2px]">view all</p>
        <p class="text-[#737373] font-medium">200</p>
      </div>
    </div>
  </div>
  
<!--For marketplace-4 -->
<div class="w-screen py-10 px-6 sm:px-16">
  <div class="flex font-bold sm:px-0">
    <h6 class="text-[14px] font-semibold">Home</h6>
    <span class="font-light">
      <svg class="h-5 w-6 text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </span>
    <span class="text-[14px] font-semibold leading-[24px] text-slate-500">Marketplace Products</span>
  </div>
  <h3 class="my-6 text-[24px] font-bold tracking-[0.1px] text-[#252B42] sm:px-0">Marketplace Products</h3>
  <div class="rounded-[10px] border py-[25px]">
    <div class="flex items-center justify-between px-6 sm:px-[42px]">
      <span class="inline-flex cursor-pointer items-center border border-slate-200 bg-slate-100 px-[15px] py-[12px] text-center text-[14px] font-semibold leading-[24px] tracking-[0.2px] text-black hover:bg-gray-200 sm:px-[23px] sm:py-[16px]"
        >Popularity
        <svg class="ml-[19px] h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </span>
      <div class="flex cursor-pointer items-center sm:gap-5">
        <svg class="w-[40px] sm:h-[54px] sm:w-[55px]" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="0.5" width="54" height="54" rx="5" fill="#E9E9E9" />
          <rect x="16.5" y="16" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
          <rect x="29.5" y="16" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
          <rect x="16.5" y="29" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
          <rect x="29.5" y="29" width="9" height="9" rx="2" stroke="#252B42" stroke-width="2" />
        </svg>
        <svg width="52" height="48" viewBox="0 0 52 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="0.5" y="0.5" width="51" height="47" rx="5" fill="white" />
          <g clip-path="url(#clip0_688_4143)">
            <path d="M19.4234 28.4383L19.4225 28.4374C19.3986 28.4127 19.371 28.3939 19.3417 28.3814L19.5382 27.9216L19.3417 28.3814C19.3124 28.3689 19.2816 28.3626 19.2508 28.3626C19.22 28.3626 19.1892 28.3689 19.1599 28.3814L18.9633 27.9216L19.1599 28.3814C19.1306 28.3939 19.103 28.4127 19.079 28.4374L19.0787 28.4377L17.3598 30.2102L16.9998 30.5814L16.6409 30.2091L16.4231 29.9832C16.423 29.9831 16.4228 29.9829 16.4227 29.9828C16.3745 29.9333 16.3124 29.9084 16.2509 29.9084C16.1893 29.9084 16.127 29.9335 16.0787 29.9832C16.0299 30.0335 16 30.1047 16 30.182C16 30.2593 16.0299 30.3306 16.0787 30.3808L16.8287 31.1535L16.8291 31.1539C16.8531 31.1786 16.8807 31.1974 16.91 31.21C16.91 31.21 16.91 31.21 16.91 31.21L16.7134 31.6697C16.8046 31.7087 16.9022 31.7287 17.0009 31.7287C17.0995 31.7287 17.1972 31.7087 17.2883 31.6697L19.4234 28.4383ZM19.4234 28.4383C19.4474 28.463 19.4672 28.4931 19.481 28.5273L19.9448 28.3405L19.4234 28.4383ZM19.4225 16.0748L19.4234 16.0757C19.4474 16.1004 19.4672 16.1305 19.481 16.1647L19.481 16.1647C19.4948 16.1989 19.5021 16.2361 19.5021 16.274C19.5021 16.312 19.4948 16.3491 19.481 16.3834L19.481 16.3834C19.4672 16.4176 19.4474 16.4477 19.4234 16.4724L19.423 16.4728L17.1731 18.7908L17.1726 18.7913C17.1487 18.816 17.1211 18.8348 17.0918 18.8473C17.0625 18.8598 17.0317 18.8661 17.0009 18.8661C16.9701 18.8661 16.9393 18.8598 16.91 18.8473L16.7134 19.3071L16.91 18.8473C16.8807 18.8348 16.8531 18.816 16.8291 18.7913L16.8287 18.7908L16.0787 18.0182L15.7321 18.3546L16.0787 18.0182C16.0547 17.9934 16.0349 17.9632 16.0211 17.9289C16.0073 17.8946 16 17.8573 16 17.8194C16 17.7814 16.0073 17.7441 16.0211 17.7098C16.0349 17.6755 16.0547 17.6453 16.0787 17.6206L15.7199 17.2723L16.0787 17.6206C16.1027 17.5958 16.1304 17.577 16.1598 17.5645C16.1892 17.552 16.2201 17.5457 16.2509 17.5457C16.2818 17.5457 16.3127 17.552 16.342 17.5645C16.3712 17.577 16.3988 17.5956 16.4227 17.6201C16.4228 17.6203 16.423 17.6204 16.4231 17.6206L16.6409 17.8465L16.9998 18.2188L17.3598 17.8476L19.0787 16.0751L19.079 16.0748C19.103 16.0501 19.1306 16.0313 19.1599 16.0188C19.1892 16.0062 19.22 16 19.2508 16C19.2815 16 19.3124 16.0062 19.3417 16.0188C19.371 16.0313 19.3986 16.0501 19.4225 16.0748ZM19.4225 22.2561L19.4234 22.257C19.4474 22.2817 19.4672 22.3118 19.481 22.346L19.9448 22.1592L19.481 22.346C19.4948 22.3803 19.5021 22.4175 19.5021 22.4554C19.5021 22.4933 19.4948 22.5305 19.481 22.5647L19.9448 22.7515L19.481 22.5647C19.4672 22.5989 19.4474 22.629 19.4234 22.6537L19.423 22.6542L17.1731 24.9722L17.1726 24.9726C17.1487 24.9973 17.1211 25.0161 17.0918 25.0287C17.0625 25.0412 17.0316 25.0474 17.0009 25.0474C16.9701 25.0474 16.9393 25.0412 16.91 25.0286C16.8807 25.0161 16.8531 24.9973 16.8291 24.9726L16.8287 24.9722L16.0787 24.1995C16.0299 24.1492 16 24.078 16 24.0007C16 23.9234 16.0299 23.8521 16.0787 23.8019L15.7199 23.4536L16.0787 23.8019C16.127 23.7521 16.1893 23.7271 16.2509 23.7271C16.3124 23.7271 16.3744 23.752 16.4226 23.8014C16.4228 23.8016 16.423 23.8017 16.4231 23.8019L16.6409 24.0278L16.9998 24.4001L17.3598 24.0289L19.0787 22.2564L19.079 22.2561C19.103 22.2314 19.1306 22.2126 19.1599 22.2001L18.9633 21.7403L19.1599 22.2001C19.1892 22.1876 19.22 22.1813 19.2508 22.1813C19.2815 22.1813 19.3124 22.1876 19.3417 22.2001L19.5382 21.7403L19.3417 22.2001C19.371 22.2126 19.3986 22.2314 19.4225 22.2561ZM22.0007 30.182C22.0007 30.105 22.0305 30.034 22.0791 29.9839C22.1272 29.9343 22.1892 29.9093 22.2506 29.9093H35.75C35.8114 29.9093 35.8735 29.9343 35.9216 29.9839C35.9702 30.034 36 30.105 36 30.182C36 30.2591 35.9702 30.3301 35.9216 30.3801C35.8735 30.4297 35.8114 30.4547 35.75 30.4547H22.2506C22.1892 30.4547 22.1272 30.4297 22.0791 30.3801C22.0305 30.3301 22.0007 30.2591 22.0007 30.182ZM22.0007 24.0007C22.0007 23.9236 22.0305 23.8526 22.0791 23.8026C22.1272 23.753 22.1892 23.728 22.2506 23.728H35.75C35.8114 23.728 35.8735 23.753 35.9216 23.8026C35.9702 23.8526 36 23.9236 36 24.0007C36 24.0777 35.9702 24.1487 35.9216 24.1988C35.8735 24.2484 35.8114 24.2734 35.75 24.2734H22.2506C22.1892 24.2734 22.1272 24.2484 22.0791 24.1988C22.0305 24.1487 22.0007 24.0777 22.0007 24.0007ZM22.0007 17.8194C22.0007 17.7423 22.0305 17.6713 22.0791 17.6213C22.1272 17.5717 22.1892 17.5467 22.2506 17.5467H35.75C35.8114 17.5467 35.8735 17.5717 35.9216 17.6213C35.9702 17.6713 36 17.7423 36 17.8194C36 17.8964 35.9702 17.9674 35.9216 18.0175C35.8735 18.067 35.8114 18.092 35.75 18.092H22.2506C22.1892 18.092 22.1272 18.067 22.0791 18.0175C22.0305 17.9674 22.0007 17.8964 22.0007 17.8194Z" fill="#252B42" stroke="#252B42" />
          </g>
          <defs>
            <clipPath id="clip0_688_4143">
              <rect width="21" height="17" fill="white" transform="translate(15.5 15.5)" />
            </clipPath>
          </defs>
        </svg>
      </div>
    </div>
    <hr class="my-[25px] mx-5 sm:mx-[41.5px]" />
    <div class="sm:mx-4">
      <div class="flex w-full flex-col flex-wrap justify-around gap-6 sm:flex-row lg:flex-nowrap lg:gap-0">
        <div>
          <div class="mx-auto h-fit w-[280px] rounded-[5px] border py-6 xl:w-[350px]">
            <div class="relative mb-3">
              <div class="pointer-events-none absolute inset-y-0 left-6 flex items-center">
                <svg aria-hidden="true" class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
              </div>
              <input type="search" id="default-search" class="focus:border-500 mx-auto block w-[250px] rounded-lg border border-[#DCDCDC] bg-gray-50 p-4 pl-10 text-sm text-black focus:ring-blue-500 dark:placeholder-gray-400 dark:focus:border-blue-500 xl:w-[320px]" placeholder="Search" required />
            </div>
            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[18px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Accessories</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-blue-500 p-[2px] text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
            <div class="mx-auto mt-2 w-[80%] flex-col text-gray-400">
              <span class="mt-1 block">View All</span>
              <span class="mt-1 block">Bags</span>
              <span class="mt-1 block">Belts</span>
              <span class="mt-1 block">Cosmetics</span>
              <span class="mt-1 block">Hats</span>
              <span class="mt-1 mb-2 block">Jewelry</span>
            </div>
            <hr class="mx-auto mb-3 mt-5 w-[280px]" />

            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Bags</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Clothings</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Entertainement</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Furniture & Decor</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Gadgets</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
            <div class="mx-auto mt-4 flex w-[80%] justify-between">
              <div class="flex justify-between gap-3">
                <p class="text-[14px] font-bold leading-[24px] tracking-[0.2px] text-[#737373]">Shoes</p>
              </div>
              <svg class="h-5 w-5 cursor-pointer rounded-full bg-[#F1F1F1] p-[2px] text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            </div>
          </div>
        </div>

        <div>
          <div class="mx-auto mb-[28px] h-fit w-[280px] text-center xl:w-[350px]">
            <div class="rounded-[5px] border-[1px] border-[#e8e8e8] bg-white px-6 py-6 text-start">
              <div>
                <div class="flex justify-between">
                  <div class="flex justify-between gap-3">
                    <p class="text-[16px] font-bold leading-[24px] tracking-[0.2px]">Colour</p>
                  </div>
                </div>

                <div class="mt-4 flex items-center justify-between">
                  <div class="form-check">
                    <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                    <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Red </label>
                  </div>

                  <p class="font-medium text-[#737373]">103</p>
                </div>
                <div class="mt-4 flex justify-between">
                  <div class="form-check">
                    <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                    <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Blue </label>
                  </div>

                  <p class="font-medium text-[#737373]">23</p>
                </div>
                <div class="mt-4 flex justify-between">
                  <div class="form-check">
                    <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                    <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Brown </label>
                  </div>

                  <p class="font-medium text-[#737373]">12</p>
                </div>
                <div class="mt-4 flex justify-between">
                  <div class="form-check">
                    <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                    <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Orange </label>
                  </div>

                  <p class="font-medium text-[#737373]">22</p>
                </div>
                <div class="mt-4 flex justify-between">
                  <div class="form-check">
                    <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                    <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Yellow </label>
                  </div>

                  <p class="font-medium text-[#737373]">11</p>
                </div>
                <div class="mt-4 flex justify-between">
                  <div class="form-check">
                    <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                    <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Pink </label>
                  </div>

                  <p class="font-medium text-[#737373]">22</p>
                </div>
              </div>
            </div>
          </div>

          <div class="mx-auto h-fit w-[280px] rounded-[5px] border-[1px] border-[#E8E8E8] px-[35px] py-[30px] xl:w-[350px]">
            <!-- inputs -->
            <div>
              <div class="mb-[20px] justify-between">
                <div class="flex justify-between gap-3">
                  <p class="text-[16px] font-bold leading-[24px] tracking-[0.2px]">Size</p>
                </div>
              </div>

              <div class="justify-between">
                <div class="form-check">
                  <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                  <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Extra Large </label>
                </div>
              </div>
              <div class="mt-4 justify-between">
                <div class="form-check">
                  <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                  <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Large </label>
                </div>
              </div>
              <div class="mt-4 justify-between">
                <div class="form-check">
                  <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                  <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Medium </label>
                </div>
              </div>
              <div class="mt-4 justify-between">
                <div class="form-check">
                  <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                  <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Small </label>
                </div>
              </div>
              <div class="mt-4 justify-between">
                <div class="form-check">
                  <input class="form-check-input checked:bg-white-600 float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-2xl border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-blue-600 focus:outline-none" type="checkbox" value="" id="flexCheckDefault" />
                  <label class="form-check-label inline-block text-gray-800" for="flexCheckDefault"> Extra small </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-col flex-wrap gap-6 sm:w-screen sm:flex-row lg:w-fit lg:flex-col">
          <div class="relative mx-auto flex h-fit w-[280px] flex-col justify-center rounded-[5px] border-[1px] border-[#E8E8E8] pt-[30px] pb-[40px] sm:mb-[0px] lg:mb-[28px] lg:mt-0 xl:w-[350px]">
            <div class="relative mx-auto bg-white">
              <div>
                <h1 class="ml-5 text-[16px] font-bold leading-[24px] xl:ml-0">Filter by Price</h1>
                <div class="flex h-32 w-64 items-center justify-center">
                  <div class="relative mx-auto py-1">
                    <div class="h-[6px] w-[220px] rounded-full bg-gray-200 xl:w-[266px]">
                      <div class="absolute h-[6px] w-[120px] rounded-full bg-[#1855CB] xl:w-[142px]" style=" left: 22%;"></div>
                      <div class="absolute top-0 -ml-2 flex h-[13px] w-[13px] cursor-pointer items-center justify-center rounded-full bg-[#1855CB] shadow" unselectable="on" onselectstart="return false;" style="left: 23%;">
                        <div class="relative -mt-2 w-1">
                          <div class="bottom-100 absolute left-0 z-40 mb-2 min-w-full opacity-100" style="margin-left: -25px;">
                            <div class="absolute left-1 shadow-md">
                              <div class="-mt-9 truncate rounded bg-[#252B42] py-1 px-4 text-xs font-bold text-white">15</div>
                              <svg class="top-100 absolute left-0 h-2 w-full text-black" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve">
                                <polygon class="fill-current" points="0,0 127.5,127.5 255,0"></polygon>
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="absolute top-0 -ml-2 flex h-[13px] w-[13px] cursor-pointer items-center justify-center rounded-full bg-[#1855CB] shadow" unselectable="on" onselectstart="return false;" style="left: 77%;">
                        <div class="relative -mt-2 w-1">
                          <div class="bottom-100 absolute left-0 z-40 mb-2 min-w-full opacity-100" style="margin-left: -25px;">
                            <div class="relative shadow-md">
                              <div class="-mt-9 truncate rounded bg-[#252B42] py-1 px-4 text-xs font-bold text-white">250</div>
                              <svg class="top-100 absolute left-0 h-2 w-full text-black" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve">
                                <polygon class="fill-current" points="0,0 127.5,127.5 255,0"></polygon>
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="absolute top-8 left-1 -ml-1 -mb-14 flex h-[50px] w-[102px] items-center rounded-[5px] border-2 border-[#e6e6e6] bg-[#f9f9f9] pl-[21px] font-semibold text-[#737373] xl:w-[125px]">15</div>
                      <div class="absolute top-8 right-1 -mr-1 -mb-14 flex h-[50px] w-[102px] items-center rounded-[5px] border-2 border-[#e6e6e6] bg-[#f9f9f9] pl-[21px] font-semibold text-[#737373] xl:w-[125px]">250</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="relative mx-auto flex h-fit w-[280px] flex-col justify-center rounded-[5px] border-[1px] border-[#E8E8E80] px-[35px] py-[30px] xl:w-[350px]">
            <div class="relative bg-white">
              <div class="mx-auto max-w-md">
                <h2 class="text-[16px] font-bold leading-[24px]">Brand</h2>
                <div class="flex items-center justify-between">
                  <div class="py-2">
                    <input id="checked-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-[5px] border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" />
                    <label for="checked-checkbox" class="ml-2 text-sm font-medium text-gray-500">Adidas</label>
                  </div>
                  <div>
                    <h2>08</h2>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="py-2">
                    <input checked id="checked-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-[5px] border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" />
                    <label for="checked-checkbox" class="ml-2 text-sm font-medium text-gray-500">Armani</label>
                  </div>
                  <div>
                    <h2>11</h2>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="py-2">
                    <input id="checked-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-[5px] border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" />
                    <label for="checked-checkbox" class="ml-2 text-sm font-medium text-gray-500">Calvin Clein</label>
                  </div>
                  <div>
                    <h2>14</h2>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="py-2">
                    <input id="checked-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-[5px] border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" />
                    <label for="checked-checkbox" class="ml-2 text-sm font-medium text-gray-500">Peter England</label>
                  </div>
                  <div>
                    <h2>34</h2>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="py-2">
                    <input id="checked-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-[5px] border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" />
                    <label for="checked-checkbox" class="ml-2 text-sm font-medium text-gray-500">Nike</label>
                  </div>
                  <div>
                    <h2>23</h2>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="py-2">
                    <input id="checked-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-[5px] border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" />
                    <label for="checked-checkbox" class="ml-2 text-sm font-medium text-gray-500">Columbia</label>
                  </div>
                  <div>
                    <h2>129</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--For marketplace-products -->
<div class="mt-4 hidden w-full flex-col space-y-8 px-[60px] md:flex lg:px-[120px]">
  <div class="flex w-[280px]">
    <h1 class="pr-3 text-sm font-medium">Home</h1>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-gray-500">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
    <h1 class="pl-4 text-sm font-medium text-gray-600">Marketplace Products</h1>
  </div>
  <div>
    <h1 class="text-2xl font-bold text-black">Marketplace Products</h1>
  </div>
  <div class="flex flex-col space-y-3">
    <div class="flex">
      <input placeholder="Search" class="text-md block w-full rounded-l-md border border-slate-300 bg-gray-100 px-4 py-2 font-semibold tracking-wide text-black placeholder-slate-600 placeholder:text-sm placeholder:font-semibold focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500" type="text" />

      <div class="relative w-fit cursor-pointer">
        <select name="yo" id="" class="h-[58px] w-[150px] border border-slate-300 bg-gray-100 px-5 text-sm font-semibold tracking-wider text-black outline-none">
          <option value="">Category</option>
          <option value="">First</option>
          <option value="">Second</option>
          <option value="">Third</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[22px] right-1 h-4 bg-white pr-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </div>

      <div class="relative w-fit cursor-pointer">
        <select name="yo" id="" class="h-[58px] w-[150px] border border-slate-300 bg-gray-100 px-5 text-sm font-semibold tracking-wider text-black outline-none">
          <option value="">Popularity</option>
          <option value="">First</option>
          <option value="">Second</option>
          <option value="">Third</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[22px] right-1 h-4 bg-white pr-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </div>

      <button class="rounded-r-md bg-blue-600 px-4 py-2 text-lg font-normal text-white hover:cursor-pointer hover:bg-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
          <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>
      </button>
    </div>
  </div>
  <h1 class="text-lg font-normal tracking-wide">Lorem ipsum dolor sit</h1>
</div>

<!-- Mobile View -->
<div class="flex justify-center text-center md:hidden">
  <div class="bg-white px-6 py-6 text-start">
    <!-- top location -->
    <div class="flex font-bold">
      <h6 class="text-[14px] font-semibold">Home</h6>
      <span class="font-light">
        <svg class="h-5 w-6 text-[#BDBDBD]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </span>
      <span class="text-[14px] font-light text-slate-500">Marketplace Products</span>
    </div>
    <!-- Heading -->
    <h3 class="my-2 text-[24px] font-bold tracking-[0.1px] text-[#252B42]">Marketplace Products</h3>
    <!-- inputs -->
    <div class="mt-4 flex flex-col justify-evenly">
      <input placeholder="Search" type="text" class="h-[50px] w-[280px] rounded-[5px] border-2 border-solid border-gray-200 bg-[#F9F9F9] p-4 py-2 text-[12px] focus:outline-none sm:w-[350px]" />
      <select class="mt-1 h-[50px] w-[280px] rounded-[5px] border-2 border-solid border-gray-200 bg-[#F9F9F9] p-4 py-2 text-[12px] focus:outline-none sm:w-[350px]">
        <option>Category</option>
      </select>
      <select class="mt-1 h-[50px] w-[280px] rounded-[5px] border-2 border-solid border-gray-200 bg-[#F9F9F9] p-4 py-2 text-[12px] focus:outline-none sm:w-[350px]">
        <option>Popularity</option>
      </select>
      <button class="mt-1 flex h-[50px] w-[280px] items-center justify-center rounded-[5px] bg-[#1855CB] p-4 text-center hover:bg-blue-700 sm:w-[350px]">
        <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </button>
    </div>
    <!-- final text -->
    <div class="text-[12px] leading-[28px] tracking-[0.2px] text-[#737373]">Search for : lundry, Dishes</div>
  </div>
</div>



```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.

