Reviews Ratings Using Tailwind UI
Reviews ratings designed with Tailwind offer an attractive and user-friendly way to showcase customer feedback and product ratings, enhancing trust and credibility. Inspired design by Ildiko Gaspar from dribbble.
card
Loading component...
145 lines
<!-- Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/17740489-Reviews-UI-Design -->
<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>
<section class="flex items-center justify-center w-screen h-screen px-8 sm:px-0">
<div
class="container max-w-lg mx-auto items-center bg-[#F8F8F8] text-[#383962] text-center rounded drop-shadow-lg py-8 px-14">
<div class="flex items-center justify-between">
<h1 class="pr-8 text-xl font-bold sm:text-2xl text-start sm:pr-16 ">What others think about the product
</h1>
<div class="p-4 mx-auto bg-white rounded-lg">
<div class="flex items-center justify-center">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star"
class="w-6 h-6 mr-2 text-yellow-500" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z">
</path>
</svg>
<span class="text-lg font-bold">4.8</span>
</div>
<p class="text-sm">Average customer rating</p>
</div>
</div>
<div class="relative my-6">
<input type="text" id="password"
class="w-full pl-3 text-sm pr-10 py-2 border-2 border-gray-200 rounded-xl hover:border-gray-300 focus:outline-none focus:border-[#383962] transition-colors"
placeholder="Search topics and reviews">
<button
class="absolute block text-xl text-center text-gray-400 transition-colors w-7 h-7 leading-0 top-2 right-2 focus:outline-none hover:text-gray-900"><i
class="mdi mdi-magnify"></i></button>
</div>
<div class="w-full">
<p class="justify-start w-full mb-2 text-sm font-bold text-start">Reviews</p>
</div>
<ul class="flex flex-col justify-center w-full gap-4 mx-auto">
<li class="flex flex-row mx-auto">
<div class="flex items-center justify-center space-x-3 text-center">
<div class="flex items-center text-xs font-bold text-black">
5
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-5 h-5 text-[#FFD66C] ml-1">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</div>
<div class="w-36 sm:w-80 bg-[#EEEEEE] h-2 rounded-md">
<div class="bg-[#FFD66C] h-2 rounded-md" style="width: 76%"></div>
</div>
<div class="text-xs text-black">106</div>
</div>
</li>
<li class="flex flex-row mx-auto">
<div class="flex items-center justify-center space-x-3 text-center">
<div class="flex items-center text-xs font-bold text-black">
4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-5 h-5 text-[#FFD66C] ml-1">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</div>
<div class="w-36 sm:w-80 bg-[#EEEEEE] h-2 rounded-md">
<div class="bg-[#FFD66C] h-2 rounded-md" style="width: 34%"></div>
</div>
<div class="text-xs text-black">32</div>
</div>
</li>
<li class="flex flex-row mx-auto">
<div class="flex items-center justify-center space-x-3 text-center">
<div class="flex items-center text-xs font-bold text-black">
3
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-5 h-5 text-[#FFD66C] ml-1">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</div>
<div class="w-36 sm:w-80 bg-[#EEEEEE] h-2 rounded-md">
<div class="bg-[#FFD66C] h-2 rounded-md" style="width: 0%"></div>
</div>
<div class="text-xs text-black">0</div>
</div>
</li>
<li class="flex flex-row mx-auto">
<div class="flex items-center justify-center space-x-3 text-center">
<div class="flex items-center text-xs font-bold text-black">
2
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-5 h-5 text-[#FFD66C] ml-1">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</div>
<div class="w-36 sm:w-80 bg-[#EEEEEE] h-2 rounded-md">
<div class="bg-[#FFD66C] h-2 rounded-md" style="width: 0%"></div>
</div>
<div class="text-xs text-black">0</div>
</div>
</li>
<li class="flex flex-row mx-auto">
<div class="flex items-center justify-center space-x-3 text-center">
<div class="flex items-center text-xs font-bold text-black">
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-5 h-5 text-[#FFD66C] ml-1">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</div>
<div class="w-36 sm:w-80 bg-[#EEEEEE] h-2 rounded-md">
<div class="bg-[#FFD66C] h-2 rounded-md" style="width: 0%"></div>
</div>
<div class="text-xs text-black">0</div>
</div>
</li>
</ul>
<div class="flex items-center justify-start w-full mt-8">
<a href="#" class="px-8 py-2.5 text-sm font-medium text-white bg-[#383962] rounded-lg">
Write a review</a>
</div>
</div>
</section>