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

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 neumorph gestaltete Produktbewertungskomponente, die Benutzeravatare, Bewertungstext und Sternebewertungen enthält. Es enthält responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

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