CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

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

HTML-Code 

<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>

Verwandte Komponenten

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.

Offen

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.

Offen

Komponente "Produktbewertungen"

Eine Webkomponente, die Benutzerbewertungen für ein Produkt anzeigt, mit Mikrointeraktionen und Unterstützung für dunkle Designs mithilfe von Tailwind CSS.

Offen