photo_star_testimonial.jsx added to the testimonial cards collection and collection.js is updated by adding the respective component

Author: Statistio-Neko

tailwind_components/testimonial_cards/collection.js

@@ -1,9 +1,11 @@
 import test from "./test_file";
 import testimonialCard from "./vertical_testimonial";
+import photoStarTestimonial from "./photo_star_testimonial"
 
 const testimonialCardsCollections = [
   {componentName: "Sample Testimonial", component: test},
   {componentName: "Vertical testimonial card", component: testimonialCard},
+  {componentName: "Photo Star Testimonial", component: photoStarTestimonial}
 ];
 
 export default testimonialCardsCollections;

tailwind_components/testimonial_cards/photo_star_testimonial.jsx

@@ -0,0 +1,54 @@
+import {stripIndent} from "react-codepen-prefill-embed";
+
+const photoStarTestimonial = stripIndent`
+
+<div class="flex h-screen w-screen items-center justify-center bg-slate-600">
+  <div class="h-96 w-64 max-w-sm rounded-xl border border-black bg-white shadow-md">
+    <a href="#"> </a>
+    <div class="p-5 text-center">
+      <a href="#"> </a>
+      <div class="bg-blend-multiply ...">
+        <div class="h-40 w-23">
+          <nav class = "mx-9">
+          <a href="https://youtu.be/dQw4w9WgXcQ"> <img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwgHAqIUkUR92_mtswDCYJD99s-KEpEhP4dA&usqp=CAU" alt="" height="140" width="140" class="rounded-3xl" > </a>
+          </nav>
+        </div>
+</div>
+      
+      <p class="mb-3 font-normal text-gray-500">Slate helps you see how many more days you need to work to reach your financial goal month and year</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://youtu.be/dQw4w9WgXcQ">
+            <h3 class="text-blue-700"><b>Rick Rolls</b></h3>
+            <p>Designer</p>
+    </div>
+  </div>
+</div>
+
+`;
+
+export default photoStarTestimonial;