tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
251 lines (250 loc) • 11.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rating | TailGrids</title>
<link
rel="shortcut icon"
href="../../assets/images/favicon.svg"
type="image/x-icon"
/>
<link rel="stylesheet" href="../../assets/css/tailwind.css" />
</head>
<body>
<!-- ====== Rating Start -->
<section class="bg-gray-2 py-20 dark:bg-dark">
<div class="container">
<div class="mx-auto w-full max-w-[470px]">
<div
class="overflow-hidden rounded-lg bg-white px-8 py-10 text-center shadow-three lg:mb-0 xl:px-[60px] dark:bg-dark-2 dark:shadow-box-dark"
>
<h3
class="mb-5 font-semibold text-dark lg:text-2xl xl:text-[28px] xl:leading-[1.43] dark:text-white"
>
Customer reviews
</h3>
<div
class="inline-flex flex-wrap items-center justify-center gap-4 rounded-md border-[.5px] border-stroke bg-gray-1 px-6 py-[10px] dark:border-dark-3 dark:bg-dark"
>
<div class="flex items-center">
<span class="mr-1">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1008_11877)">
<path
d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
fill="#FFA645"
/>
</g>
<defs>
<clipPath id="clip0_1008_11877">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span class="mr-1">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1008_11877)">
<path
d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
fill="#FFA645"
/>
</g>
<defs>
<clipPath id="clip0_1008_11877">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span class="mr-1">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1008_11877)">
<path
d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
fill="#FFA645"
/>
</g>
<defs>
<clipPath id="clip0_1008_11877">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span class="mr-1">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1008_11877)">
<path
d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
fill="#FFA645"
/>
</g>
<defs>
<clipPath id="clip0_1008_11877">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span class="mr-1">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1008_11877)">
<path
d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
fill="#FFA645"
/>
</g>
<defs>
<clipPath id="clip0_1008_11877">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
</div>
<span class="text-base font-medium text-dark dark:text-white">
4.7 out of 5
</span>
</div>
<p
class="pb-10 pt-3 text-base font-medium text-body-color dark:text-dark-6"
>
40 customer ratings
</p>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
5 star
</span>
<div
class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
>
<div
class="absolute left-0 top-0 h-full w-[84%] rounded-full bg-[#FFA645]"
></div>
</div>
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
84%
</span>
</div>
<div class="flex items-center justify-between">
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
4 star
</span>
<div
class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
>
<div
class="absolute left-0 top-0 h-full w-[50%] rounded-full bg-[#FFA645]"
></div>
</div>
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
9%
</span>
</div>
<div class="flex items-center justify-between">
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
3 star
</span>
<div
class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
>
<div
class="absolute left-0 top-0 h-full w-[40%] rounded-full bg-[#FFA645]"
></div>
</div>
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
4%
</span>
</div>
<div class="flex items-center justify-between">
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
2 star
</span>
<div
class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
>
<div
class="absolute left-0 top-0 h-full w-[20%] rounded-full bg-[#FFA645]"
></div>
</div>
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
2%
</span>
</div>
<div class="flex items-center justify-between">
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
1 star
</span>
<div
class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
>
<div
class="absolute left-0 top-0 h-full w-[10%] rounded-full bg-[#FFA645]"
></div>
</div>
<span
class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
>
1%
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Rating End -->
</body>
</html>