Review page with filters review page
This style lets you check reviews based on user’s preference.
<section class="py-24 relative">
<div class="w-full max-w-7xl px-4 md:px-5 lg:px-6 mx-auto">
<div class="">
<h2 class="font-manrope font-bold text-3xl sm:text-4xl leading-10 text-black mb-8 text-center">
Customer reviews &
rating</h2>
<div class="grid grid-cols-12 mb-11">
<div class="col-span-12 xl:col-span-4 flex items-center">
<div class="box flex flex-col gap-y-4 w-full max-xl:max-w-3xl mx-auto">
<div class="flex items-center w-full">
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">5</p>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12042_8589)">
<path
d="M9.10326 2.31699C9.47008 1.57374 10.5299 1.57374 10.8967 2.31699L12.7063 5.98347C12.8519 6.27862 13.1335 6.48319 13.4592 6.53051L17.5054 7.11846C18.3256 7.23765 18.6531 8.24562 18.0596 8.82416L15.1318 11.6781C14.8961 11.9079 14.7885 12.2389 14.8442 12.5632L15.5353 16.5931C15.6754 17.41 14.818 18.033 14.0844 17.6473L10.4653 15.7446C10.174 15.5915 9.82598 15.5915 9.53466 15.7446L5.91562 17.6473C5.18199 18.033 4.32456 17.41 4.46467 16.5931L5.15585 12.5632C5.21148 12.2389 5.10393 11.9079 4.86825 11.6781L1.94038 8.82416C1.34687 8.24562 1.67438 7.23765 2.4946 7.11846L6.54081 6.53051C6.86652 6.48319 7.14808 6.27862 7.29374 5.98347L9.10326 2.31699Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_12042_8589">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
<p class="h-2 w-full sm:min-w-[278px] rounded-[30px] bg-gray-200 ml-5 mr-3">
<span class="h-full w-[30%] rounded-[30px] bg-indigo-500 flex"></span>
</p>
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">30</p>
</div>
<div class="flex items-center w-full">
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">4</p>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12042_8589)">
<path
d="M9.10326 2.31699C9.47008 1.57374 10.5299 1.57374 10.8967 2.31699L12.7063 5.98347C12.8519 6.27862 13.1335 6.48319 13.4592 6.53051L17.5054 7.11846C18.3256 7.23765 18.6531 8.24562 18.0596 8.82416L15.1318 11.6781C14.8961 11.9079 14.7885 12.2389 14.8442 12.5632L15.5353 16.5931C15.6754 17.41 14.818 18.033 14.0844 17.6473L10.4653 15.7446C10.174 15.5915 9.82598 15.5915 9.53466 15.7446L5.91562 17.6473C5.18199 18.033 4.32456 17.41 4.46467 16.5931L5.15585 12.5632C5.21148 12.2389 5.10393 11.9079 4.86825 11.6781L1.94038 8.82416C1.34687 8.24562 1.67438 7.23765 2.4946 7.11846L6.54081 6.53051C6.86652 6.48319 7.14808 6.27862 7.29374 5.98347L9.10326 2.31699Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_12042_8589">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
<p class="h-2 w-full xl:min-w-[278px] rounded-[30px] bg-gray-200 ml-5 mr-3">
<span class="h-full w-[40%] rounded-[30px] bg-indigo-500 flex"></span>
</p>
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">40</p>
</div>
<div class="flex items-center">
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">3</p>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12042_8589)">
<path
d="M9.10326 2.31699C9.47008 1.57374 10.5299 1.57374 10.8967 2.31699L12.7063 5.98347C12.8519 6.27862 13.1335 6.48319 13.4592 6.53051L17.5054 7.11846C18.3256 7.23765 18.6531 8.24562 18.0596 8.82416L15.1318 11.6781C14.8961 11.9079 14.7885 12.2389 14.8442 12.5632L15.5353 16.5931C15.6754 17.41 14.818 18.033 14.0844 17.6473L10.4653 15.7446C10.174 15.5915 9.82598 15.5915 9.53466 15.7446L5.91562 17.6473C5.18199 18.033 4.32456 17.41 4.46467 16.5931L5.15585 12.5632C5.21148 12.2389 5.10393 11.9079 4.86825 11.6781L1.94038 8.82416C1.34687 8.24562 1.67438 7.23765 2.4946 7.11846L6.54081 6.53051C6.86652 6.48319 7.14808 6.27862 7.29374 5.98347L9.10326 2.31699Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_12042_8589">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
<p class="h-2 w-full xl:min-w-[278px] rounded-[30px] bg-gray-200 ml-5 mr-3">
<span class="h-full w-[20%] rounded-[30px] bg-indigo-500 flex"></span>
</p>
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">20</p>
</div>
<div class="flex items-center">
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">2</p>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12042_8589)">
<path
d="M9.10326 2.31699C9.47008 1.57374 10.5299 1.57374 10.8967 2.31699L12.7063 5.98347C12.8519 6.27862 13.1335 6.48319 13.4592 6.53051L17.5054 7.11846C18.3256 7.23765 18.6531 8.24562 18.0596 8.82416L15.1318 11.6781C14.8961 11.9079 14.7885 12.2389 14.8442 12.5632L15.5353 16.5931C15.6754 17.41 14.818 18.033 14.0844 17.6473L10.4653 15.7446C10.174 15.5915 9.82598 15.5915 9.53466 15.7446L5.91562 17.6473C5.18199 18.033 4.32456 17.41 4.46467 16.5931L5.15585 12.5632C5.21148 12.2389 5.10393 11.9079 4.86825 11.6781L1.94038 8.82416C1.34687 8.24562 1.67438 7.23765 2.4946 7.11846L6.54081 6.53051C6.86652 6.48319 7.14808 6.27862 7.29374 5.98347L9.10326 2.31699Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_12042_8589">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
<p class="h-2 w-full xl:min-w-[278px] rounded-[30px] bg-gray-200 ml-5 mr-3">
<span class="h-full w-[16%] rounded-[30px] bg-indigo-500 flex"></span>
</p>
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">16</p>
</div>
<div class="flex items-center">
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">1</p>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_12042_8589)">
<path
d="M9.10326 2.31699C9.47008 1.57374 10.5299 1.57374 10.8967 2.31699L12.7063 5.98347C12.8519 6.27862 13.1335 6.48319 13.4592 6.53051L17.5054 7.11846C18.3256 7.23765 18.6531 8.24562 18.0596 8.82416L15.1318 11.6781C14.8961 11.9079 14.7885 12.2389 14.8442 12.5632L15.5353 16.5931C15.6754 17.41 14.818 18.033 14.0844 17.6473L10.4653 15.7446C10.174 15.5915 9.82598 15.5915 9.53466 15.7446L5.91562 17.6473C5.18199 18.033 4.32456 17.41 4.46467 16.5931L5.15585 12.5632C5.21148 12.2389 5.10393 11.9079 4.86825 11.6781L1.94038 8.82416C1.34687 8.24562 1.67438 7.23765 2.4946 7.11846L6.54081 6.53051C6.86652 6.48319 7.14808 6.27862 7.29374 5.98347L9.10326 2.31699Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_12042_8589">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
<p class="h-2 w-full xl:min-w-[278px] rounded-[30px] bg-gray-200 ml-5 mr-3">
<span class="h-full w-[8%] rounded-[30px] bg-indigo-500 flex"></span>
</p>
<p class="font-medium text-lg py-[1px] text-black mr-[2px]">8</p>
</div>
</div>
</div>
<div class="col-span-12 max-xl:mt-8 xl:col-span-8 xl:pl-8 w-full min-h-[230px]">
<div
class="grid grid-cols-12 h-full px-8 max-lg:py-8 rounded-3xl bg-gray-100 w-full max-xl:max-w-3xl max-xl:mx-auto">
<div class="col-span-12 md:col-span-8 flex items-center">
<div class="flex flex-col sm:flex-row items-center max-lg:justify-center w-full h-full">
<div
class="sm:pr-3 sm:border-r border-gray-200 flex items-center justify-center flex-col">
<h2 class="font-manrope font-bold text-5xl text-black text-center mb-4">4.3</h2>
<div class="flex items-center gap-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<p class="font-normal text-lg leading-8 text-gray-400">46 Ratings</p>
</div>
<div
class="sm:pl-3 sm:border-l border-gray-200 flex items-center justify-center flex-col">
<h2 class="font-manrope font-bold text-5xl text-black text-center mb-4">4.8</h2>
<div class="flex items-center gap-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<g clip-path="url(#clip0_13624_3137)">
<path
d="M17.1033 2.71738C17.4701 1.97413 18.5299 1.97413 18.8967 2.71738L23.0574 11.1478C23.2031 11.4429 23.4846 11.6475 23.8103 11.6948L33.1139 13.0467C33.9341 13.1659 34.2616 14.1739 33.6681 14.7524L26.936 21.3146C26.7003 21.5443 26.5927 21.8753 26.6484 22.1997L28.2376 31.4656C28.3777 32.2825 27.5203 32.9055 26.7867 32.5198L18.4653 28.145C18.174 27.9919 17.826 27.9919 17.5347 28.145L9.21334 32.5198C8.47971 32.9055 7.62228 32.2825 7.76239 31.4656L9.35162 22.1997C9.40726 21.8753 9.29971 21.5443 9.06402 21.3146L2.33193 14.7524C1.73841 14.1739 2.06593 13.1659 2.88615 13.0467L12.1897 11.6948C12.5154 11.6475 12.7969 11.4429 12.9426 11.1478L17.1033 2.71738Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_3137">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<p class="font-normal text-lg leading-8 text-gray-400">Last Month</p>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-4 max-lg:mt-8 md:pl-8">
<div class="flex items-center flex-col justify-center w-full h-full ">
<button
class="rounded-full px-6 py-4 bg-indigo-600 font-semibold text-lg text-white whitespace-nowrap mb-6 w-full text-center shadow-sm shadow-transparent transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-400">Write
A Review</button>
<button
class="rounded-full px-6 py-4 bg-white font-semibold text-lg text-indigo-600 whitespace-nowrap w-full text-center shadow-sm shadow-transparent transition-all duration-500 hover:bg-indigo-100 hover:shadow-indigo-200">See
All Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="pb-8 border-b border-gray-200 max-xl:max-w-3xl max-xl:mx-auto">
<h4 class="font-manrope font-semibold text-3xl leading-10 text-black mb-6">Most helpful positive
review</h4>
<div class="flex sm:items-center flex-col sm:flex-row justify-between mb-4">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<g clip-path="url(#clip0_13624_2974)">
<path
d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_2974">
<rect width="30" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<g clip-path="url(#clip0_13624_2974)">
<path
d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_2974">
<rect width="30" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<g clip-path="url(#clip0_13624_2974)">
<path
d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_2974">
<rect width="30" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<g clip-path="url(#clip0_13624_2974)">
<path
d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_2974">
<rect width="30" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<g clip-path="url(#clip0_13624_2974)">
<path
d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z"
fill="#FBBF24" />
</g>
<defs>
<clipPath id="clip0_13624_2974">
<rect width="30" height="30" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="flex items-center gap-3">
<h6 class="font-semibold text-lg leading-8 text-black">@john.doe</h6>
<p class="font-medium text-base leading-7 text-gray-400">Nov 01, 2023</p>
</div>
</div>
<p class="font-normal text-lg leading-8 text-gray-500 ">
I recently had the opportunity to explore Pagedone's UI design system, and it left a lasting
impression on my workflow. The system seamlessly blends user-friendly features with a robust set
of design components, making it a go-to for creating visually stunning and consistent
interfaces.
</p>
</div>
<div
class="flex flex-col sm:flex-row items-center justify-between pt-8 max-xl:max-w-3xl max-xl:mx-auto">
<p class="font-normal text-lg py-[1px] text-black">46 reviews</p>
<form>
<div class="flex">
<div class="relative ">
<div class=" absolute -left-0 px-2 top-0 py-2">
<p class="font-normal text-lg leading-8 text-gray-500">Sort by:</p>
</div>
<input type="text"
class="block w-60 h-11 pr-4 pl-20 py-2.5 text-lg leading-8 font-medium rounded-full cursor-pointer shadow-xs text-black bg-transparent placeholder-black focus:outline-gray-200 "
placeholder="Most Relevant">
<div id="dropdown-button" data-target="dropdown"
class="dropdown-toggle flex-shrink-0 cursor-pointer z-10 inline-flex items-center py-2.5 px-4 text-base font-medium text-center text-gray-900 bg-transparent absolute right-0 top-2 pl-2 "
type="button"><svg class="ml-2" width="12" height="7" viewBox="0 0 12 7" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1 1.5L4.58578 5.08578C5.25245 5.75245 5.58579 6.08579 6 6.08579C6.41421 6.08579 6.74755 5.75245 7.41421 5.08579L11 1.5"
stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<div id="dropdown"
class="absolute top-9 right-0 z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="dropdown-button">
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Most Relevant</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">last week</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">oldest</a>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
