CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Retro-Produktbewertungskarte

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.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9734; <!-- 4 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
    </p>
  </div>
</div>

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9733; <!-- 5 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
    </p>
  </div>
</div>

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"

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

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