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

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

Komponente "Produktbewertungen"

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

Offen

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.

Offen