Still Guessing how can you showcase your testimonials(You do have 🤪). Dont worry if don't have testimonials or have no idea how to design it, click this card
<div class="flex h-screen w-screen items-center justify-center bg-sky-600">
<div
class="w-70 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md"
>
<div class="p-5 text-center">
<ul class="mb-5 flex justify-center">
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="mr-1 w-4 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>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="mr-1 w-4 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>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="mr-1 w-4 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>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="far"
data-icon="star"
class="mr-1 w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 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.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="far"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 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.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
></path>
</svg>
</li>
</ul>
<p class="mb-3 font-normal text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore delectus
porro voluptatem reprehenderit, fugit praesentium dolorum dolore
asperiores voluptate, ea maiores eum deleniti soluta facilis corrupti
laudantium nesciunt laborum vero..
</p>
<div class="flex items-center justify-center">
<div class="h-10 w-10">
<a
href="https://github.com/Anuran12"
target="_blank"
rel="noreferrer"
>
<img
src=https://avatars.githubusercontent.com/u/104062485?s=400&u=1efa5a4c0bfa17835bf5ccaec9a62b496dace514&v=4"
class="rounded-3xl">
</a>
</div>
<div
class="text-bl my-0 mx-5 text-xs font-normal tracking-normal text-gray-700"
>
<a
href="https://github.com/Anuran12"
target="_blank"
rel="noreferrer"
>
<h3 class="text-blue-700"><b>Anuran Das</b></h3>
<p>Designer</p>
</a>
</div>
</div>
</div>
</div>
</div><div class="flex h-screen w-screen items-center justify-center bg-sky-300">
<div
class="h-96 w-64 max-w-sm rounded-xl border border-black bg-white shadow-md"
>
<div class="p-5 text-center">
<div class="bg-blend-multiply ...">
<div class="h-40 w-23">
<nav class="mx-9">
<img
src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwgHAqIUkUR92_mtswDCYJD99s-KEpEhP4dA&usqp=CAU"
alt="" height="140" width="140" class="rounded-3xl" >
</nav>
</div>
</div>
<p class="mb-3 font-normal text-gray-500">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis unde
perferendis
</p>
<ul class="mb-5 flex justify-center">
<div class="mb-0 flex items-end">
<svg
aria-hidden="true"
class="h-7 w-7 text-orange-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>First star</title>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
<svg
aria-hidden="true"
class="h-7 w-7 text-orange-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Second star</title>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
<svg
aria-hidden="true"
class="h-7 w-7 text-orange-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Third star</title>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
<svg
aria-hidden="true"
class="h-7 w-7 text-orange-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Fourth star</title>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
<svg
aria-hidden="true"
class="h-7 w-7 text-gray-300 dark:text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Fifth star</title>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
</div>
</ul>
<div
class="text-bl my-0 mx-5 text-xs font-normal tracking-normal text-gray-700"
>
<a
href="https://github.com/jsvigneshkanna"
target="_blank"
rel="noreferrer"
>
<h3 class="text-blue-700"><b>J S Vignesh Kanna</b></h3>
<p>Software Engineer</p>
</a>
</div>
</div>
</div>
</div>
<div class="flex h-screen w-screen items-center justify-center bg-sky-300">
<div class="h-80 w-96 max-w-sm rounded-xl border border-black bg-white shadow-lg shadow-red-400">
<div class="p-5 text-center">
<ul class="flex">
<div class="bg-blend-multiply">
<div class="h-0">
<nav class="mx-4 -ml-5 -mt-5 mb-0"><img src=https://images.unsplash.com/photo-1522003878398-14c13adf3c5d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9" alt="" height="170" width="140" class = "object-cover h-60 w-60 rounded-t-md" ></nav>
</div>
</div>
<ul class="flex-col">
<div class="text-bl -tracking-tight- mx-2 text-left font-normal text-gray-700">
<a href="https://github.com/jsvigneshkanna" target="_blank" rel="noreferrer">
<h3 class="m space-y-6 text-blue-700"><b>J S Vignesh Kanna</b></h3>
<ul class="my-1">
Software Engineer
<ul class="">
<div class="my-3 -mx-1 mb-0 flex items-end">
<svg aria-hidden="true" class="h-7 w-7 text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>First star</title>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg aria-hidden="true" class="h-7 w-7 text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Second star</title>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg aria-hidden="true" class="h-7 w-7 text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Third star</title>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg aria-hidden="true" class="h-7 w-7 text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Fourth star</title>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg aria-hidden="true" class="h-7 w-7 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Fifth star</title>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
</ul>
<ul class="flex-col space-y-0">
<p class="mb-3 font-normal text-gray-600"></p>
<p class="mb-3 font-normal text-gray-600">This proved to be impossible using concepts of space and</p>
<p class="mb-3 font-normal text-gray-600">time. Einstein new view of</p>
<p class="mb-3 space-y-8 font-normal text-gray-600">time first and then</p>
</ul>
</ul></a
>
</div>
</ul>
</ul>
</div>
</div>
</div><div class="flex h-screen w-screen items-center justify-center bg-sky-300">
<div
class="h-96 w-60 max-w-sm rounded-xl border border-black bg-gray-300 shadow-lg"
>
<div class="p-5 text-center">
<div class="w-54 h-60 max-w-full rounded-lg">
<img
src=https://images.squarespace-cdn.com/content/v1/53b599ebe4b08a2784696956/1438211096322-NBOR72MPHBEED1BSD36Q/image-asset.jpeg"
height="180" width="180" class = "object-cover h-60 w-60 rounded-lg" >
</div>
<ul class="flex-col space-y-2">
<p><b> SUSAVI</b></p>
<ul class="flex-col space-y-2">
<p>Production</p>
</ul>
<ul class="flex space-x-8">
<div class="h-10 w-10">
<img
src="https://img.icons8.com/fluency/48/000000/facebook-new.png"
class="rounded-3xl"
/>
</div>
<div class="h-10 w-10">
<img
src="https://img.icons8.com/3d-fluency/100/000000/instagram-new.png"
class="rounded-3xl"
/>
</div>
<div class="h-10 w-10">
<img
src="https://img.icons8.com/color/48/000000/twitter--v1.png"
class="rounded-3xl"
/>
</div>
</ul>
</ul>
</div>
</div>
</div>