CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

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.

Vorschau

HTML-Code 

<div class="container mx-auto p-4 font-mono">
  <!-- Light Mode -->
  <div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
    <h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Review 1 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">John Doe</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star_half</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
        <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
      </div>
      <!-- Review 2 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">Jane Smith</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"I

Verwandte Komponenten

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

Produktbewertungen Komponente - Bauhaus Rainbow Gradient

Eine einfache, funktionale Produktbewertungskomponente mit einem vom Bauhaus inspirierten Design und einem Regenbogen-Farbverlauf, der sich für Beratung/Dienstleistungen eignet. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

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