CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

Komponente "Produktbewertungen"

Eine einfache, reaktionsschnelle Komponente für Produktbewertungen, die für einen Blog oder eine Content-Site geeignet ist und nach den Prinzipien des Material Designs entwickelt wurde. Es verfügt über ein triadisches Farbschema und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 text-center tracking-tight leading-tight">
        Customer Reviews
      </h2>
      <div class="space-y-8">
        <!-- Review 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-blue-500 dark:ring-blue-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</p>
              <div class="flex text-yellow-500">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"This product exceeded my expectations!"</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              I've been using this for a few weeks now and I'm incredibly impressed. It's user-friendly, robust, and performs exactly as advertised. Highly recommend for anyone looking for a reliable solution. The material quality feels premium.
            </p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-purple-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-purple-500 dark:ring-purple-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300">David Lee</p>
              <div class="flex text-yellow-500">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 20 20"><path d="M10 15.27l-3.82 2.43 1.05-4.59-3.56-3.09 4.67-.4 1.86-4.22 1.86 4.22 4.67.4-3.56 3.09 1.05 4.59z"/></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Good value for the price, minor flaw."</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              Overall, I'm happy with my purchase. It does what it promises and is a good value. However, I noticed a small ding on the side upon arrival, which was a bit disappointing. Still, it functions perfectly.
            </p>
          </div>
        </div>

        <!-- Review 3 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-yellow-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-yellow-500 dark:ring-yellow-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-yellow-700 dark:text-yellow-300">Sarah Kim</p>
              <div class="flex text-yellow-500">
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Absolutely perfect, no complaints!"</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              From the moment I unboxed it, I knew this was a quality product. Setup was a breeze, and it works flawlessly. It's truly transformed my daily routine. A definite five-star experience!
            </p>
          </div>
        </div>

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

Verwandte Komponenten

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.

Offen

Komponente "Produktbewertungen"

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

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