CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

Komponente "Produktbewertungen"

Eine Produktbewertungskomponente mit 3D-Designelementen, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="antialiased w-full">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="mb-6 md:mb-8">
            <span class="text-lg text-blue-500 font-bold">Reviews</span>
            <h2 class="text-3xl md:text-4xl mt-2 font-bold font-heading">Customer Reviews</h2>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Alice Williams</p>
                  <p class="text-sm text-gray-500">January 20, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-gray-300 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"Absolutely love this product! The quality is top-notch, and it exceeded my expectations. Highly recommend it to everyone."</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Robert Johnson</p>
                  <p class="text-sm text-gray-500">January 18, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"This is by far the best purchase I

Verwandte Komponenten

Komponente "Produktbewertungen"

Eine einfache, monochromatische, skeuomorphe Produktbewertungskomponente, die für Fertigungs-/Industrieunternehmen entwickelt wurde und ein responsives Layout und Unterstützung für den Dunkelmodus bietet.

Offen

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"

Responsive Product Reviews Komponente mit Brutalismus-Design, monochromatischem Farbschema, komplexer Komplexität für E-Commerce, mit Unterstützung für dunkle Themen

Offen