CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

Komponente "Produktbewertungen"

Eine vom Cyberpunk inspirierte Produktbewertungskomponente für Mode-/Schönheitsprodukte mit erdfarbenen Akzenten auf dunklem Hintergrund. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<section class="bg-zinc-900 dark:bg-black py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white dark:text-gray-100 text-center mb-12 relative">
      Customer Insights
      <span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-500 mx-auto mt-4 rounded-full"></span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Alice J.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "Absolutely love this product! The quality is outstanding, and it exceeded my expectations. It's a game-changer for my daily routine. Highly recommend for anyone looking for reliability and style."
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Mark T.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "An absolute must-have! The craftsmanship is superb, and it feels incredibly durable. It has greatly improved my experience, and I've received many compliments. Worth every penny!"
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
      </div>

      <!-- Review Card 3 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Sophia L.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "Impressed with the efficiency and sleek design. It fits perfectly into my lifestyle. The results are noticeable, and I'm very happy with my purchase. Don't hesitate if you're considering it!"
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-15">October 15, 2023</time></p>
      </div>
    </div>

    <div class="text-center mt-16">
      <button class="px-8 py-3 rounded-full bg-yellow-600 dark:bg-yellow-500 text-white dark:text-gray-900 font-bold text-lg uppercase tracking-wide shadow-lg transform transition-transform duration-300 hover:scale-105 hover:bg-yellow-700 dark:hover:bg-yellow-400 focus:outline-none focus:ring-4 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-opacity-75">
        View More Reviews
      </button>
    </div>
  </div>
</section>

Verwandte Komponenten

Komponente "Produktbewertungen"

Retro/Vintage-Stil, Farbschema in Erdtönen, Moderate Komplexität Produktbewertungen Komponente mit responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS für das Styling, picsum.photos für Produktbilder und randomuser.me für Avatare. Kein JavaScript.

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

Komponente "Produktbewertungen"

Produktbewertungen Komponente, die Tailwind CSS mit Neumorphism-Stil, responsiven Effekten und Unterstützung für dunkle Themen verwendet. Es ist kein JavaScript-Code enthalten. Es werden Platzhalterbilder und Avatare verwendet.

Offen