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-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Customer Reviews</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <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>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-gray-400 dark:text-gray-600 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed felis at elit eleifend consectetur.
      </p>
    </div>
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <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>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">1 week ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </p>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktbewertungen"

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

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

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