Skip to content
Docs
💻 | Components
Testimonials

Testimonials Component

Testimonials in a webpage are graphical elements that showcase positive feedback or reviews from customers or users. They often include a quote, name, photo, and rating, and are designed to build trust and credibility with potential customers. Testimonials can be displayed on a dedicated page or incorporated throughout the website, such as on product pages or in the footer.

Testimonial Card 1

11

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

Rajdeep Sengupta

Designer

1 <div class="flex w-fit flex-col items-center rounded-2xl bg-white px-10 pb-10 pt-12">
2<img class="w-20 pb-6" src="https://i.ibb.co/T0F7hLK/11.png" alt="11" />
3<p class="w-96 text-center text-sm font-normal text-gray-700">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
4<div class="flex justify-center pt-6">
5  <svg classxmlns="http://www.w3.org/2000/svg" fill="#e77c40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e77c40" class="ml-1 h-6 w-6">
6    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
7  </svg>
8  <svg classxmlns="http://www.w3.org/2000/svg" fill="#e77c40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e77c40" class="ml-1 h-6 w-6">
9    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg
10  ><svg classxmlns="http://www.w3.org/2000/svg" fill="#e77c40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e77c40" class="ml-1 h-6 w-6">
11    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg
12  ><svg classxmlns="http://www.w3.org/2000/svg" fill="#e77c40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e77c40" class="ml-1 h-6 w-6">
13    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg
14  ><svg classxmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e77c40" class="ml-1 h-6 w-6">
15    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
16  </svg>
17</div>
18<h1 class="pt-4 text-lg font-bold text-gray-900">Rajdeep Sengupta</h1>
19<p class="pt-2 text-sm font-normal text-gray-600">Designer</p>
20</div>
21

Testimonial Card 2

cover

Rajdeep Sengupta

Designer

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1<div class="flex items-center justify-center">
2<div class="relative w-fit rounded-2xl border bg-white pl-20 pr-11">
3  <img class="absolute -left-9 top-10" src="https://i.ibb.co/BNfZ1sn/cover.png" width="80" alt="cover" border="0" />
4  <h1 class="pt-11 text-2xl font-bold">Rajdeep Sengupta</h1>
5  <h4 class="pt-1.5 text-sm font-normal">Designer</h4>
6  <div class="flex items-center gap-3.5 pt-3">
7    <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
8      <path d="M20.6364 8.4193C20.5788 8.24949 20.4727 8.10028 20.3312 7.99009C20.1897 7.8799 20.019 7.81356 19.8403 7.79925L14.6111 7.38374L12.3483 2.37473C12.2762 2.2134 12.159 2.07637 12.0108 1.98019C11.8626 1.884 11.6897 1.83277 11.513 1.83267C11.3363 1.83258 11.1634 1.88362 11.015 1.97964C10.8667 2.07566 10.7493 2.21256 10.6771 2.37381L8.41428 7.38374L3.18513 7.79925C3.00944 7.81317 2.84148 7.87741 2.70134 7.98428C2.5612 8.09116 2.45482 8.23615 2.39493 8.4019C2.33503 8.56765 2.32416 8.74715 2.3636 8.91892C2.40305 9.09069 2.49115 9.24746 2.61736 9.37047L6.48167 13.1376L5.11499 19.0555C5.07349 19.2347 5.08679 19.4222 5.15316 19.5936C5.21954 19.7651 5.33592 19.9127 5.4872 20.0172C5.63849 20.1217 5.8177 20.1784 6.00157 20.1798C6.18545 20.1812 6.3655 20.1273 6.51836 20.0251L11.5127 16.6955L16.507 20.0251C16.6633 20.1288 16.8475 20.1822 17.035 20.1781C17.2225 20.174 17.4043 20.1125 17.5558 20.0021C17.7073 19.8916 17.8214 19.7373 17.8827 19.5601C17.9439 19.3828 17.9495 19.1911 17.8985 19.0106L16.2209 13.1403L20.3814 9.39616C20.6539 9.15034 20.7538 8.76693 20.6364 8.4193Z" fill="#E77C40" />
9    </svg>
10    <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
11      <path d="M20.6364 8.4193C20.5788 8.24949 20.4727 8.10028 20.3312 7.99009C20.1897 7.8799 20.019 7.81356 19.8403 7.79925L14.6111 7.38374L12.3483 2.37473C12.2762 2.2134 12.159 2.07637 12.0108 1.98019C11.8626 1.884 11.6897 1.83277 11.513 1.83267C11.3363 1.83258 11.1634 1.88362 11.015 1.97964C10.8667 2.07566 10.7493 2.21256 10.6771 2.37381L8.41428 7.38374L3.18513 7.79925C3.00944 7.81317 2.84148 7.87741 2.70134 7.98428C2.5612 8.09116 2.45482 8.23615 2.39493 8.4019C2.33503 8.56765 2.32416 8.74715 2.3636 8.91892C2.40305 9.09069 2.49115 9.24746 2.61736 9.37047L6.48167 13.1376L5.11499 19.0555C5.07349 19.2347 5.08679 19.4222 5.15316 19.5936C5.21954 19.7651 5.33592 19.9127 5.4872 20.0172C5.63849 20.1217 5.8177 20.1784 6.00157 20.1798C6.18545 20.1812 6.3655 20.1273 6.51836 20.0251L11.5127 16.6955L16.507 20.0251C16.6633 20.1288 16.8475 20.1822 17.035 20.1781C17.2225 20.174 17.4043 20.1125 17.5558 20.0021C17.7073 19.8916 17.8214 19.7373 17.8827 19.5601C17.9439 19.3828 17.9495 19.1911 17.8985 19.0106L16.2209 13.1403L20.3814 9.39616C20.6539 9.15034 20.7538 8.76693 20.6364 8.4193Z" fill="#E77C40" />
12    </svg>
13    <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
14      <path d="M20.6364 8.4193C20.5788 8.24949 20.4727 8.10028 20.3312 7.99009C20.1897 7.8799 20.019 7.81356 19.8403 7.79925L14.6111 7.38374L12.3483 2.37473C12.2762 2.2134 12.159 2.07637 12.0108 1.98019C11.8626 1.884 11.6897 1.83277 11.513 1.83267C11.3363 1.83258 11.1634 1.88362 11.015 1.97964C10.8667 2.07566 10.7493 2.21256 10.6771 2.37381L8.41428 7.38374L3.18513 7.79925C3.00944 7.81317 2.84148 7.87741 2.70134 7.98428C2.5612 8.09116 2.45482 8.23615 2.39493 8.4019C2.33503 8.56765 2.32416 8.74715 2.3636 8.91892C2.40305 9.09069 2.49115 9.24746 2.61736 9.37047L6.48167 13.1376L5.11499 19.0555C5.07349 19.2347 5.08679 19.4222 5.15316 19.5936C5.21954 19.7651 5.33592 19.9127 5.4872 20.0172C5.63849 20.1217 5.8177 20.1784 6.00157 20.1798C6.18545 20.1812 6.3655 20.1273 6.51836 20.0251L11.5127 16.6955L16.507 20.0251C16.6633 20.1288 16.8475 20.1822 17.035 20.1781C17.2225 20.174 17.4043 20.1125 17.5558 20.0021C17.7073 19.8916 17.8214 19.7373 17.8827 19.5601C17.9439 19.3828 17.9495 19.1911 17.8985 19.0106L16.2209 13.1403L20.3814 9.39616C20.6539 9.15034 20.7538 8.76693 20.6364 8.4193Z" fill="#E77C40" />
15    </svg>
16    <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
17      <path d="M20.6364 8.4193C20.5788 8.24949 20.4727 8.10028 20.3312 7.99009C20.1897 7.8799 20.019 7.81356 19.8403 7.79925L14.6111 7.38374L12.3483 2.37473C12.2762 2.2134 12.159 2.07637 12.0108 1.98019C11.8626 1.884 11.6897 1.83277 11.513 1.83267C11.3363 1.83258 11.1634 1.88362 11.015 1.97964C10.8667 2.07566 10.7493 2.21256 10.6771 2.37381L8.41428 7.38374L3.18513 7.79925C3.00944 7.81317 2.84148 7.87741 2.70134 7.98428C2.5612 8.09116 2.45482 8.23615 2.39493 8.4019C2.33503 8.56765 2.32416 8.74715 2.3636 8.91892C2.40305 9.09069 2.49115 9.24746 2.61736 9.37047L6.48167 13.1376L5.11499 19.0555C5.07349 19.2347 5.08679 19.4222 5.15316 19.5936C5.21954 19.7651 5.33592 19.9127 5.4872 20.0172C5.63849 20.1217 5.8177 20.1784 6.00157 20.1798C6.18545 20.1812 6.3655 20.1273 6.51836 20.0251L11.5127 16.6955L16.507 20.0251C16.6633 20.1288 16.8475 20.1822 17.035 20.1781C17.2225 20.174 17.4043 20.1125 17.5558 20.0021C17.7073 19.8916 17.8214 19.7373 17.8827 19.5601C17.9439 19.3828 17.9495 19.1911 17.8985 19.0106L16.2209 13.1403L20.3814 9.39616C20.6539 9.15034 20.7538 8.76693 20.6364 8.4193Z" fill="#E77C40" />
18    </svg>
19
20    <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
21      <path d="M4.49772 12.1376L3.13104 18.0556C3.08872 18.2348 3.10143 18.4226 3.1675 18.5945C3.23357 18.7664 3.34993 18.9143 3.50139 19.019C3.65286 19.1237 3.83237 19.1803 4.0165 19.1814C4.20062 19.1825 4.3808 19.1281 4.53349 19.0252L9.52783 15.6956L14.5222 19.0252C14.6784 19.1289 14.8627 19.1823 15.0502 19.1782C15.2377 19.1741 15.4194 19.1126 15.5709 19.0022C15.7225 18.8917 15.8365 18.7374 15.8978 18.5602C15.9591 18.3829 15.9646 18.1912 15.9136 18.0107L14.236 12.1404L18.3966 8.39625C18.5298 8.27626 18.625 8.11985 18.6703 7.94635C18.7156 7.77286 18.709 7.58989 18.6515 7.42007C18.5939 7.25026 18.4878 7.10104 18.3463 6.99088C18.2048 6.88072 18.0342 6.81445 17.8554 6.80026L12.6263 6.38383L10.3634 1.37482C10.2913 1.21353 10.174 1.07657 10.0257 0.980462C9.87745 0.884359 9.70453 0.833221 9.52783 0.833221C9.35114 0.833221 9.17822 0.884359 9.02995 0.980462C8.88168 1.07657 8.76439 1.21353 8.69223 1.37482L6.42942 6.38383L1.20027 6.79934C1.02457 6.81326 0.856613 6.8775 0.716475 6.98438C0.576337 7.09125 0.469957 7.23624 0.410062 7.40199C0.350167 7.56774 0.339292 7.74724 0.37874 7.91901C0.418188 8.09078 0.506287 8.24755 0.632498 8.37056L4.49772 12.1376ZM7.11459 8.16969C7.27831 8.15679 7.43555 8.10009 7.56982 8.00552C7.70409 7.91095 7.81044 7.782 7.87773 7.63219L9.52783 3.98068L11.1779 7.63219C11.2452 7.782 11.3516 7.91095 11.4859 8.00552C11.6201 8.10009 11.7774 8.15679 11.9411 8.16969L15.5843 8.45862L12.5841 11.159C12.3236 11.3938 12.2199 11.7552 12.3153 12.0927L13.4646 16.1148L10.0378 13.8299C9.88741 13.729 9.71036 13.6751 9.52921 13.6751C9.34806 13.6751 9.17101 13.729 9.0206 13.8299L5.43972 16.2175L6.40282 12.0478C6.43813 11.8944 6.43339 11.7345 6.38906 11.5835C6.34472 11.4325 6.26228 11.2955 6.14966 11.1856L3.3631 8.46871L7.11459 8.16969Z" fill="#E77C40" />
22    </svg>
23  </div>
24  <p class="w-80 pb-12 pt-5 text-sm font-normal tracking-wide">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
25</div>
26</div>

Testimonial Card 3

Regina Miss

Designer

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1 <div class="w-fit rounded-2xl bg-white px-3 py-8">
2<div class="ml-4 flex">
3  <img src="https://i.ibb.co/xJ1D5G3/Ellipse-4.png" class="h-auto w-20 rounded-full" alt="" />
4  <div class="ml-6">
5    <h1 class="text-2xl font-bold leading-8">Regina Miss</h1>
6    <h3 class="font-normal text-gray-600">Designer</h3>
7    <div class="mt-2 flex justify-between">
8      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
9        <path d="M12.9564 6.72278L10.8805 8.96692L11.3704 12.1326C11.4504 12.6494 11.2651 13.1646 10.8865 13.4766C10.5005 13.7939 9.99644 13.8374 9.57111 13.5907L7.00045 12.0929L4.42979 13.5907C4.24713 13.6972 4.04913 13.7496 3.85246 13.7496C3.59246 13.7496 3.33444 13.6574 3.11444 13.4766C2.73644 13.1646 2.55046 12.6494 2.63046 12.1326L3.12045 8.96692L1.04446 6.72278C0.704458 6.35528 0.582444 5.81463 0.726444 5.31213C0.871778 4.80363 1.25711 4.44143 1.73177 4.36493L4.60446 3.90204L5.88845 1.01831C6.09912 0.544311 6.52578 0.250366 7.00045 0.250366C7.47512 0.250366 7.90178 0.545061 8.11245 1.01831L9.39645 3.90204L12.2691 4.36493C12.7431 4.44143 13.1285 4.80363 13.2738 5.31213C13.4178 5.81463 13.2964 6.35528 12.9564 6.72278Z" fill="#FF4B55" />
10      </svg>
11
12      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
13        <path d="M12.9564 6.72278L10.8805 8.96692L11.3704 12.1326C11.4504 12.6494 11.2651 13.1646 10.8865 13.4766C10.5005 13.7939 9.99644 13.8374 9.57111 13.5907L7.00045 12.0929L4.42979 13.5907C4.24713 13.6972 4.04913 13.7496 3.85246 13.7496C3.59246 13.7496 3.33444 13.6574 3.11444 13.4766C2.73644 13.1646 2.55046 12.6494 2.63046 12.1326L3.12045 8.96692L1.04446 6.72278C0.704458 6.35528 0.582444 5.81463 0.726444 5.31213C0.871778 4.80363 1.25711 4.44143 1.73177 4.36493L4.60446 3.90204L5.88845 1.01831C6.09912 0.544311 6.52578 0.250366 7.00045 0.250366C7.47512 0.250366 7.90178 0.545061 8.11245 1.01831L9.39645 3.90204L12.2691 4.36493C12.7431 4.44143 13.1285 4.80363 13.2738 5.31213C13.4178 5.81463 13.2964 6.35528 12.9564 6.72278Z" fill="#FF4B55" />
14      </svg>
15
16      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
17        <path d="M12.9564 6.72278L10.8805 8.96692L11.3704 12.1326C11.4504 12.6494 11.2651 13.1646 10.8865 13.4766C10.5005 13.7939 9.99644 13.8374 9.57111 13.5907L7.00045 12.0929L4.42979 13.5907C4.24713 13.6972 4.04913 13.7496 3.85246 13.7496C3.59246 13.7496 3.33444 13.6574 3.11444 13.4766C2.73644 13.1646 2.55046 12.6494 2.63046 12.1326L3.12045 8.96692L1.04446 6.72278C0.704458 6.35528 0.582444 5.81463 0.726444 5.31213C0.871778 4.80363 1.25711 4.44143 1.73177 4.36493L4.60446 3.90204L5.88845 1.01831C6.09912 0.544311 6.52578 0.250366 7.00045 0.250366C7.47512 0.250366 7.90178 0.545061 8.11245 1.01831L9.39645 3.90204L12.2691 4.36493C12.7431 4.44143 13.1285 4.80363 13.2738 5.31213C13.4178 5.81463 13.2964 6.35528 12.9564 6.72278Z" fill="#FF4B55" />
18      </svg>
19      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
20        <path d="M12.9564 6.72278L10.8805 8.96692L11.3704 12.1326C11.4504 12.6494 11.2651 13.1646 10.8865 13.4766C10.5005 13.7939 9.99644 13.8374 9.57111 13.5907L7.00045 12.0929L4.42979 13.5907C4.24713 13.6972 4.04913 13.7496 3.85246 13.7496C3.59246 13.7496 3.33444 13.6574 3.11444 13.4766C2.73644 13.1646 2.55046 12.6494 2.63046 12.1326L3.12045 8.96692L1.04446 6.72278C0.704458 6.35528 0.582444 5.81463 0.726444 5.31213C0.871778 4.80363 1.25711 4.44143 1.73177 4.36493L4.60446 3.90204L5.88845 1.01831C6.09912 0.544311 6.52578 0.250366 7.00045 0.250366C7.47512 0.250366 7.90178 0.545061 8.11245 1.01831L9.39645 3.90204L12.2691 4.36493C12.7431 4.44143 13.1285 4.80363 13.2738 5.31213C13.4178 5.81463 13.2964 6.35528 12.9564 6.72278Z" fill="#FF4B55" />
21      </svg>
22      <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
23        <path d="M13.5914 6.19623C13.406 5.55048 12.9174 5.08922 12.316 4.99323L9.61606 4.55826L8.41004 1.85004C8.14204 1.24854 7.60205 0.875 7.00005 0.875C6.39805 0.875 5.85806 1.24854 5.59006 1.85004L4.38404 4.55826L1.68405 4.99323C1.08272 5.08998 0.594054 5.55048 0.408721 6.19623C0.225388 6.83673 0.380713 7.52449 0.812713 7.99249L2.76071 10.0985L2.30138 13.0678C2.19938 13.7263 2.43538 14.3817 2.91672 14.7785C3.19472 15.008 3.52206 15.125 3.85139 15.125C4.10006 15.125 4.35071 15.0582 4.58204 14.9225L6.99938 13.514L9.41672 14.9225C9.95605 15.2375 10.594 15.1805 11.0827 14.7785C11.564 14.3817 11.8 13.7263 11.698 13.0678L11.2387 10.0985L13.1867 7.99249C13.6194 7.52449 13.7747 6.83598 13.5914 6.19623ZM12.2634 6.91098L10.0594 9.293C9.89938 9.46475 9.82672 9.71605 9.86472 9.9628L10.3847 13.325C10.404 13.4487 10.3467 13.5261 10.2947 13.5681C10.2567 13.5988 10.1554 13.6625 10.0307 13.5905L7.30671 12.0035C7.11471 11.891 6.88539 11.891 6.69339 12.0035L3.96939 13.5905C3.84472 13.6625 3.74339 13.5988 3.70539 13.5681C3.65339 13.5253 3.59605 13.4487 3.61539 13.325L4.13539 9.9628C4.17339 9.7168 4.10006 9.4655 3.94072 9.293L1.73672 6.91098C1.65339 6.82098 1.65872 6.72274 1.67805 6.65674C1.69472 6.59899 1.74204 6.49855 1.87271 6.4783L4.91806 5.98776C5.13473 5.95251 5.32205 5.80102 5.41938 5.58127L6.78138 2.52203C6.83805 2.39378 6.94271 2.375 6.99938 2.375C7.05605 2.375 7.16071 2.39378 7.21738 2.52203L8.57938 5.58127C8.67671 5.80102 8.86472 5.95251 9.08072 5.98776L12.1267 6.4783C12.2574 6.49855 12.3047 6.59899 12.3214 6.65674C12.3414 6.72274 12.3467 6.82098 12.2634 6.91098Z" fill="#FF4B55" />
24      </svg>
25    </div>
26  </div>
27</div>
28<p class="ml-4 mt-4 w-72 font-normal text-gray-600">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
29</div>

Testimonial Card 4

cover

Regina Miss

Designer

This proved to be impossible using consept of space and time.Einstein new view of time first and then

1<div>
2
3<img src="https://i.ibb.co/N9d8Pmm/cover.png" alt="cover" class="rounded-t-2xl w-96">
4<section
5  class="section p-5 flex flex-col justify-center items-center w-96 rounded-b-2xl bg-white">
6
7  <div class="heading text-center font-semibold mb-2 mt-0">
8
9      <h1 class="text-slate-900 text-2xl font-bold">Regina Miss
10      </h2>
11      <h4 class="text-base font-bold text-gray-400">Designer</h4>
12  </div>
13
14  <div class="stars flex gap-2 mb-2">
15
16      <svg class="w-4 h-4 fill-pink-600 stroke-pink-600 stroke-[3px]"
17          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth= {1.5}
18          stroke="currentColor" className="w-6 h-6">
19          <path strokeLinecap="round" strokeLinejoin="round"
20              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
21      </svg>
22      <svg class="w-4 h-4 fill-pink-600 stroke-pink-600 stroke-[3px]"
23          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth= {1.5}
24          stroke="currentColor" className="w-6 h-6">
25          <path strokeLinecap="round" strokeLinejoin="round"
26              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
27      </svg>
28      <svg class="w-4 h-4 fill-pink-600 stroke-pink-600 stroke-[3px]"
29          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth= {1.5}
30          stroke="currentColor" className="w-6 h-6">
31          <path strokeLinecap="round" strokeLinejoin="round"
32              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
33      </svg>
34      <svg class="w-4 h-4 stroke-pink-600 stroke-2" xmlns="http://www.w3.org/2000/svg" fill="none"
35          viewBox="0 0 24 24" strokeWidth= {1.5} stroke="currentColor" className="w-6 h-6">
36          <path strokeLinecap="round" strokeLinejoin="round"
37              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
38      </svg>
39      <svg class="w-4 h-4 stroke-pink-600 stroke-2" xmlns="http://www.w3.org/2000/svg" fill="none"
40          viewBox="0 0 24 24" strokeWidth= {1.5} stroke="currentColor" className="w-6 h-6">
41          <path strokeLinecap="round" strokeLinejoin="round"
42              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
43      </svg>
44
45  </div>
46  <div class="text max-w-sm text-center">
47      <p class="font-sans">This proved to be impossible using consept of space and time.Einstein
48          new
49          view of time first
50          and
51          then</p>
52  </div>
53</section>
54</div>

Testimonial Card 5

cover2123

Regina Miss

Designer

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1<div class="bg-white w-fit rounded-2xl flex gap-6 px-6 py-8">
2<img src="https://i.ibb.co/Ykt0SrL/cover2123.png" alt="cover2123" class="h-20"/>
3<div class=" flex items-center justify-center">
4  <div>
5    <h2 class="text-black text-2xl font-bold">Regina Miss</h1>
6    <h3 class="text-gray-900 text-base mt-1 font-bold">Designer</h2>
7    <p class="text-gray-900 text-sm font-normal py-2 w-96">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
8    <div class="flex gap-x-2 mt-2">
9              <svg class="w-4 h-4  stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
10                  fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
11                                  <path strokeLinecap="round" strokeLinejoin="round"
12                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black" />
13              </svg>
14              <svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
15                  fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
16                  <path strokeLinecap="round" strokeLinejoin="round"
17                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black"/>
18              </svg>
19              <svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
20                  fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
21                  <path strokeLinecap="round" strokeLinejoin="round"
22                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black"/>
23              </svg>
24              <svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
25                  fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
26                  <path strokeLinecap="round" strokeLinejoin="round"
27                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black"/>
28              </svg>
29              <svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg" fill="none"
30                  viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
31                  <path strokeLinecap="round" strokeLinejoin="round"
32                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
33              </svg>
34          </div>
35   
36  </div>
37</div>
38</div>
39

Testimonial Card 6

Ellipse-4

Regina Miss

Designer

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1<div class="flex w-fit flex-col items-center justify-center rounded-2xl bg-white px-6 py-12">
2<img src="https://i.ibb.co/18C2ddr/Ellipse-4.png" alt="Ellipse-4" border="0" class="mb-3" />
3<div class="mb-2 text-center">
4  <h1 class="mt-2 text-2xl font-bold text-black">Regina Miss</h1>
5  <h3 class="mt-2 text-base font-bold text-gray-400">Designer</h3>
6</div>
7<p class="mt-2 w-60 pl-2 text-center text-gray-600">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
8</div>

Testimonial Card 7

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

profile picture
Regina Miss
Designer
1<div class="flex w-72 flex-col items-center rounded-3xl bg-white px-8 py-10">
2<div class="flex gap-3">
3  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="orange" class="h-6 w-6">
4    <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" />
5  </svg>
6  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="orange" class="h-6 w-6">
7    <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" />
8  </svg>
9  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="orange" class="h-6 w-6">
10    <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" />
11  </svg>
12  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="orange" class="h-6 w-6">
13    <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" />
14  </svg>
15  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="orange" class="h-6 w-6">
16    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
17  </svg>
18</div>
19<div class="py-6">
20  <p class="text-gray-800">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
21</div>
22
23<div class="flex gap-x-5">
24  <img class="h-20 w-20 rounded-full" src="https://i.ibb.co/HKtLs8P/On-Paste-20221014-154000.png" alt="profile picture" />
25  <div class="mt-2">
26    <div class="mb-1 text-xl font-bold text-black">Regina Miss</div>
27    <div class="text-sm font-bold text-gray-400">Designer</div>
28  </div>
29</div>
30</div>