CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

Komponente "Produktbewertungen"

Produktbewertungen Komponente mit Material Design, responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="container mx-auto p-4 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
  </div>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>

</div>

Verwandte Komponenten

Retro_Vintage_Product_Reviews_Component

Eine einfache, reaktionsschnelle Komponente für Produktbewertungen mit Retro-/Vintage-Ästhetik, die professionelle Blautöne verwendet, die für Produktions-/Industrieunternehmen geeignet sind. Enthält Unterstützung für den Dunkelmodus.

Offen

Komponente "Produktbewertungen"

Eine reaktionsschnelle Komponente für Produktbewertungen, die mit Tailwind CSS erstellt wurde und Mikrointeraktionen beim Hover, Unterstützung für dunkle Designs und Platzhalterbilder bietet. Es wird kein JavaScript verwendet.

Offen

Komponente "Produktbewertungen"

Eine reaktionsschnelle Produktbewertungskomponente, die für Social-Media-Schnittstellen entwickelt wurde und über eine Benutzeroberfläche im Dunkelmodus mit einem Graustufen-Farbschema verfügt. Enthält Bewertungen, Benutzer-Avatare, Bewertungstext und eine Schaltfläche "Weiterlesen".

Offen