Review Customer Section Navbar Logo Center Using Tailwind UI
Customer reviews section with a sticky title and scrollable user reviews, skillfully designed using Tailwind to provide both functionality and aesthetic appeal.
section
Loading component...
646 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://us.typology.com/ -->
<div class="container py-8 pl-4 pr-4 md:py-20 sm:pl-12 sm:pr-0">
<div class="container">
<nav class="hidden md:inline-block">
<ul class="text-sm">
<li class="inline">
<div class="inline">
Reviews
</div>
</li>
</ul>
</nav>
<h1 class="my-8 text-6xl font-bold md:my-5">Reviews</h1>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-5">
<div class="h-full md:pr-24">
<div class="sticky top-20">
<div>
<div class="flex items-center mt-6 space-x-4 md:mt-8">
<div class="flex space-x-4">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current md:h-8 md:w-8">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current md:h-8 md:w-8">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current md:h-8 md:w-8">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current md:h-8 md:w-8">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current md:h-8 md:w-8">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111V1.24444Z">
</path>
</svg>
</div>
<span class="text-3xl font-medium leading-none md:text-6xl">
4.2
</span>
</div>
<p class="mt-4 text-2xl font-medium md:mt-6 ">
Our overall rating is 4.2 out of 5 stars from over 60533 reviews.
</p>
<p class="mt-6 font-mono text-sm">Want to know more about our products? <br>Find all
Typology reviews written by our customers and discover their experiences according to their skin types and
concerns.
</p>
<div class="relative mt-8 md:max-w-80 md:mt-12">
<div class="space-y-4">
<label class="flex items-center cursor-pointer">
<div class="flex space-x-1"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
class="fill-current" style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
</div>
<span class="inline-block w-full pl-5">
<div class="flex items-center w-full">
<span class="relative block w-full">
<span class="block w-full h-2 py-1 border border-gray-500">
<span
class="absolute inset-y-0 left-0 z-10 block h-full transition-all duration-500 ease-out bg-gray-500"
style="width:60%;"></span>
</span>
</span>
<span class="pl-4 text-xs font-medium leading-none text-gray-700 min-w-12 align-right">
60%
</span>
</div>
</span>
</label>
<label class="flex items-center cursor-pointer">
<div class="flex space-x-1">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
</div>
<span class="inline-block w-full pl-5">
<div class="flex items-center w-full">
<span class="relative block w-full">
<span class="block w-full h-2 py-1 border border-gray-500">
<span
class="absolute inset-y-0 left-0 z-10 block h-full transition-all duration-500 ease-out bg-gray-500"
style="width:19%;">
</span>
</span>
</span>
<span class="pl-4 text-xs font-medium leading-none text-gray-700 min-w-12 align-right">
19%
</span>
</div>
</span>
</label>
<label class="flex items-center cursor-pointer">
<div class="flex space-x-1">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
</div>
<span class="inline-block w-full pl-5">
<div class="flex items-center w-full">
<span class="relative block w-full">
<span class="block w-full h-2 py-1 border border-gray-500">
<span
class="absolute inset-y-0 left-0 z-10 block h-full transition-all duration-500 ease-out bg-gray-500"
style="width:10%;"></span>
</span>
</span>
<span class="pl-4 text-xs font-medium leading-none text-gray-700 min-w-12 align-right">
10%
</span>
</div>
</span>
</label>
<label class="flex items-center cursor-pointer">
<div class="flex space-x-1">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
</div>
<span class="inline-block w-full pl-5">
<div class="flex items-center w-full">
<span class="relative block w-full">
<span class="block w-full h-2 py-1 border border-gray-500">
<span
class="absolute inset-y-0 left-0 z-10 block h-full transition-all duration-500 ease-out bg-gray-500"
style="width:5%;">
</span>
</span>
</span>
<span class="pl-4 text-xs font-medium leading-none text-gray-700 min-w-12 align-right">
5%
</span>
</div>
</span>
</label>
<label class="flex items-center cursor-pointer">
<div class="flex space-x-1">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L3.33333 3.33333L0 3.75L2.29444 6.31667L1.66667 10L5 8.33333L8.33333 10L7.71111 6.31667L10 3.75L6.66667 3.33333L5 0ZM5 1.24444L6.3 3.85L8.88333 4.17222L7.11667 6.15L7.6 9.01111L5 7.71111L2.4 9.01111L2.88333 6.15L1.11667 4.17222L3.7 3.85L5 1.24444Z">
</path>
</svg>
</div>
<span class="inline-block w-full pl-5">
<div class="flex items-center w-full">
<span class="relative block w-full">
<span class="block w-full h-2 py-1 border border-gray-500">
<span
class="absolute inset-y-0 left-0 z-10 block h-full transition-all duration-500 ease-out bg-gray-500"
style="width:6%;">
</span>
</span>
</span>
<span class="pl-4 text-xs font-medium leading-none text-gray-700 min-w-12 align-right">
6%
</span>
</div>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<ul class="divide-y divide-gray-500 reviews-list">
<li>
<div class="w-full py-8">
<div class="items-start md:flex">
<div class="flex-shrink-0 w-56">
<span class="block text-sm">Théo D.</span>
<span class="block text-xs text-gray-700">Verified buyer</span>
<span class="block text-xs text-gray-700">France, February 13, 2020</span>
<ul class="hidden mt-10 md:block">
<li class="text-xs leading-relaxed">
Skin Type:
<span>Oily</span>
</li>
<li class="text-xs leading-relaxed">
Age range:
<span>35-44 years old</span>
</li>
<li class="text-xs leading-relaxed">
Sensitive skin:
<span>Yes</span>
</li>
</ul>
</div>
<div class="w-full mt-8 md:pl-4 md:mt-0">
<div class="block">
<div class="flex space-x-1"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
class="fill-current" style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
</div>
</div>
<p class="mt-3 text-sm font-medium leading-tight uppercase">Magic! A must have for those pesky
little pimples!</p>
<p class="text-xs text-gray-700">
About
<a href="/products/salicylic-acid-serum" class="underline">
Targeted Blemish Serum with 2% Salicylic Acid + 1% Zinc
</a></p>
<div class="mt-4 rich-text">
<span>I've been applying it every day as an all-over on my pimples and
all over my face (like The Ordinary Salicylic Acid Serum) for over a month and my skin has
definitely changed. I used to have a lot of</span>
<span style="display:none;"> small acne
pimples and sometimes big ones that stayed for a long time and were very inflammatory,
everything has changed. My skin is smoothed with sometimes small pimples that go away in two
days, I just have to apply serums in bigger quantity on the imperfection and it does the job. I
put you if attached the difference before/after because it is bluffing for me, having an oily
and dull skin because of the tobacco (I joined this serum with the serum brightness of Typology
with the vitamin C)</span>
<span>
<span>…</span>
<button class="text-gray-700">
<span>Show more</span>
</button>
</span>
</div>
<p class="mt-4 text-xs">
Translated from French.
<button class="font-medium underline">
See original.
</button>
</p>
<div class="flex items-center mt-4"><span class="text-gray-700 text-[13px]">Was this review
helpful?</span>
<div class="flex ml-auto"><button
class="px-2 py-1 text-xs text-gray-700 uppercase transition duration-200 border border-gray-700 hover:border-black hover:text-black">
Yes
<sup class="text-8">2347</sup>
</button>
<button
class="px-2 py-1 ml-3 text-xs text-gray-700 uppercase transition duration-200 border border-gray-700 hover:border-black hover:text-black">
No
<sup class="text-8">151</sup>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="w-full py-8">
<div class="items-start md:flex">
<div class="flex-shrink-0 w-56">
<span class="block text-sm">Jacqueline C.</span>
<span class="block text-xs text-gray-700">Verified buyer</span>
<span class="block text-xs text-gray-700">France, April 11, 2019</span>
<ul class="hidden mt-10 md:block">
<li class="text-xs leading-relaxed">
Skin Type:
<span>Dry</span>
</li>
<li class="text-xs leading-relaxed">
Age range:
<span>65+ years old</span>
</li>
<li class="text-xs leading-relaxed">
Sensitive skin:
<span>Yes</span>
</li>
</ul>
</div>
<div class="w-full mt-8 md:pl-4 md:mt-0">
<div class="block">
<div class="flex space-x-1"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
class="fill-current" style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg></div>
</div>
<p class="mt-3 text-sm font-medium leading-tight uppercase">Like all your products,</p>
<p class="text-xs text-gray-700">
About
<a href="/products/minimalist-moisturizer" class="underline">
9-Ingredient Face Moisturizer
</a></p>
<div class="mt-4 rich-text"><span>Like all your products, very pleasant to apply and on the skin. It
would be nice to make promotions from time to time on all your products.</span>
</div>
<p class="mt-4 text-xs">
Translated from French.
<button class="font-medium underline">
See original.
</button>
</p>
<div class="flex items-center mt-4">
<span class="text-gray-700 text-[13px]">Was this review
helpful?</span>
<div class="flex ml-auto">
<button
class="px-2 py-1 text-xs text-gray-700 uppercase transition duration-200 border border-gray-700 hover:border-black hover:text-black">
Yes
<sup class="text-8">1354</sup></button>
<button
class="px-2 py-1 ml-3 text-xs text-gray-700 uppercase transition duration-200 border border-gray-700 hover:border-black hover:text-black">
No
<sup class="text-8">78</sup>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="w-full py-8">
<div class="items-start md:flex">
<div class="flex-shrink-0 w-56"><span class="block text-sm">Marine P.</span>
<span class="block text-xs text-gray-700">Verified buyer</span>
<span class="block text-xs text-gray-700">France, June 9, 2020</span>
<ul class="hidden mt-10 md:block">
<li class="text-xs leading-relaxed">
Skin Type:
<span>Combination</span></li>
<li class="text-xs leading-relaxed">
Age range:
<span>18-24 years old</span></li>
<li class="text-xs leading-relaxed">
Sensitive skin:
<span>Yes</span></li>
</ul>
</div>
<div class="w-full mt-8 md:pl-4 md:mt-0">
<div class="block">
<div class="flex space-x-1">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" class="fill-current"
style="width:10px;height:10px;">
<path
d="M5 0L6.66667 3.33333L10 3.75L7.71111 6.31667L8.33333 10L5 8.33333L1.66667 10L2.29444 6.31667L0 3.75L3.33333 3.33333L5 0Z">
</path>
</svg></div>
</div>
<p class="mt-3 text-sm font-medium leading-tight uppercase">It's been years since</p>
<p class="text-xs text-gray-700">
About
<a href="/products/niacinamide-serum" class="underline">
Even-Complexion Serum with 12% Niacinamide
</a></p>
<div class="mt-4 rich-text"><span>I've had rashes on my cheeks for years, so they haven't
disappeared from the first applications, but they are becoming a little more discreet. And its
application is very pleasant. This is my before and after?</span>
</div>
<p class="mt-4 text-xs">
Translated from French.
<button class="font-medium underline">
See original.
</button>
</p>
<div class="flex items-center mt-4"><span class="text-gray-700 text-[13px]">Was this review
helpful?</span>
<div class="flex ml-auto"><button
class="px-2 py-1 text-xs text-gray-700 uppercase transition duration-200 border border-gray-700 hover:border-black hover:text-black">
Yes
<sup class="text-8">1038</sup></button><button
class="px-2 py-1 ml-3 text-xs text-gray-700 uppercase transition duration-200 border border-gray-700 hover:border-black hover:text-black">
No
<sup class="text-8">74</sup></button></div>
</div>
</div>
</div>
</div>
</li>
</ul>
<nav class="md:mt-18">
<ul class="flex items-center justify-center text-xs leading-none">
<li>
<span class="inline-block p-1 font-medium text-black">01</span>
</li>
<li>
<button class="inline-block p-1 font-medium text-gray-700 hover:underline">
02
</button>
</li>
<li>
<button class="inline-block p-1 font-medium text-gray-700 hover:underline">
03
</button>
</li>
<li>
<button class="inline-block p-1 font-medium text-gray-700 hover:underline">
04
</button>
</li>
<li>
<button class="inline-block p-1 font-medium text-gray-700 hover:underline">
05
</button>
</li>
<li>...</li>
<li>
<button class="inline-block p-1 font-medium text-gray-700 hover:underline">
6054
</button>
</li>
<li>
<button class="inline-block p-1 ml-3"><svg width="14" height="14" viewBox="0 0 14 14"
xmlns="http://www.w3.org/2000/svg" class="fill-current">
<path
d="M2.625 1.89189L7.84319 7.06308L2.62501 12.2342L4.40683 14L11.5341 7.06308L4.53409 -8.26971e-08L2.625 1.89189Z">
</path>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>