Produktbewertungen

Komponente "Produktbewertungen"

Eine einfache Produktbewertungskomponente, die im Material Design-Stil mit einem Graustufen-Farbschema gestaltet ist.

                <div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
        <div class="mt-4">
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-400">5 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
                    <p class="text-gray-600 dark:text-gray-400">4 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
                    <p class="text-gray-600 dark:text-gray-400">3 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Retro-Produktbewertungskarte

Eine Produktbewertungskomponente, die in einer Retro-/Vintage-Ästhetik gestaltet ist und ein triadisches Farbschema (Blaugrün, Fuchsia, Bernstein) verwendet. Es ist einfach, reaktionsschnell, unterstützt den Dunkelmodus und eignet sich für ein Portfolio zur Präsentation von Produktfeedback. Verwendet Tailwind CSS.

Vorschau öffnen

                <div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9734; <!-- 4 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
    </p>
  </div>
</div>

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9733; <!-- 5 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
    </p>
  </div>
</div>

Komponente "Produktbewertungen"

Eine minimalistische Komponente für Produktbewertungen, die für Social-Media-Schnittstellen entwickelt wurde und ein triadisches Farbschema und interaktive Elemente integriert.

Vorschau öffnen

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">John Doe</h3>
            <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
        </div>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/500/200" alt="Product Image" class="w-full h-32 object-cover rounded-md">
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">This product has exceeded my expectations! The quality is exceptional and it looks great in my living room.</p>
    <div class="flex items-center space-x-4 mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Like</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-1 px-2 rounded">Reply</button>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300">Leave a Review</h4>
        <textarea class="w-full border border-gray-300 dark:border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Submit</button>
    </div>
</div>

Produktbewertungen Komponente (Skeuomorphes Pastell)

Eine komplexe und reaktionsschnelle Komponente für Produktbewertungen, die mit einer Skeuomorphen Designästhetik unter Verwendung von Pastellfarben und Unterstützung des Dunkelmodus gestaltet ist. Mit geschichteten Karten, subtilen Farbverläufen und Schatten, um Tiefe zu erzeugen. Enthält Avatar, Name, Sternebewertung, Bewertungstext und optionale Bilder. Verwendet ausschließlich Tailwind CSS ohne JavaScript.

Vorschau öffnen

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
    <!-- Reviews Header -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
        <!-- Static Average Rating - Skeuomorphic feel -->
        <div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
            <span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
            <span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
        </div>
    </div>

    <!-- Reviews List -->
    <div class="space-y-6">
        <!-- Individual Review Card -->
        <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                        <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
            </p>

            <!-- Review Images - Skeuomorphic border/shadow -->
            <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
            </div>

            <!-- Static Helpful/Report buttons - Skeuomorphic feel -->
             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

         <!-- Individual Review Card 2 -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
            </p>

            <!-- No images for this review -->

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

        <!-- Individual Review Card 3 - Lower rating -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
            </p>

            <!-- Review Images -->
             <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
             </div>

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>
    </div>
</div>

Komponente "Produktbewertungen"

Responsive Product Reviews Komponente mit Brutalismus-Design, monochromatischem Farbschema, komplexer Komplexität für E-Commerce, mit Unterstützung für dunkle Themen

Vorschau öffnen

                <div class="bg-gray-900 text-white p-8 min-h-screen">
  <div class="container mx-auto">
    <h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Sarah Johnson</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">David Chen</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
      <!-- Review Card 3 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Emily Davis</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Good value for the price."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
       <!-- Review Card 4 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Michael Brown</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Solid product, works as expected."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

    </div>
  </div>
</div>

Komponente "Produktbewertungen"

Retro/Vintage-Stil, Farbschema in Erdtönen, Moderate Komplexität Produktbewertungen Komponente mit responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS für das Styling, picsum.photos für Produktbilder und randomuser.me für Avatare. Kein JavaScript.

Vorschau öffnen

                <div class="container mx-auto p-4 font-mono">
  <!-- Light Mode -->
  <div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
    <h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Review 1 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">John Doe</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star_half</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
        <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
      </div>
      <!-- Review 2 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">Jane Smith</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"I

Komponente "Produktbewertungen"

Eine komplexe und ansprechende Produktbewertungskomponente mit Mikrointeraktionen, die für Unternehmenswebsites entwickelt wurde. Die Komponente verfügt über ein dunkles responsives Design mit Tailwind CSS, das Animationen und ein Farbschema enthält, das auf analogen Farben basiert.

Vorschau öffnen

                <div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
    <div class="space-y-4">
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ★</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
    </div>
</div>

Komponente "Produktbewertungen"

Eine komplexe Produktbewertungskomponente, die für ein Dashboard entwickelt wurde, mit 3D-Designelementen, Erdtönen und Unterstützung für den Dunkelmodus.

Vorschau öffnen

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.5</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">3.8</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.0</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
    </div>
</div>

Komponente "Produktbewertungen"

Eine reaktionsschnelle Produktbewertungskomponente, die für den Dunkelmodus mit einem lebendigen Farbschema entwickelt wurde und für Geschäfts-/Unternehmenswebsites geeignet ist. Es bietet Benutzer-Avatare, Rezensionen und Benutzerkommentare in einem interaktiven Layout.

Vorschau öffnen

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
  <div class="space-y-4">
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9734;
          </span>
          <span class="ml-2 text-sm text-gray-400">4.0</span>
        </div>
        <p class="text-gray-300">Great product! Highly recommend it to others.</p>
        <span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9733;
          </span>
          <span class="ml-2 text-sm text-gray-400">5.0</span>
        </div>
        <p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
        <span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9732;&#9732;
          </span>
          <span class="ml-2 text-sm text-gray-400">3.0</span>
        </div>
        <p class="text-gray-300">It's okay, but I expected better quality.</p>
        <span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
      </div>
    </div>
  </div>
</div>

Komponente "Produktbewertungen"

Eine Produktbewertungskomponente im Brutalismus-Stil mit hohem Kontrast, responsivem Design und Unterstützung für dunkle Themen. Es enthält Benutzer-Avatare und Produktbilder von Platzhalterdiensten.

Vorschau öffnen

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

Kategorien