CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Produktbewertungen Komponente - Bauhaus Rainbow Gradient

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.

Vorschau

HTML-Code 

<div class="font-sans antialiased text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wider text-center drop-shadow-md">Client Testimonials</h2>
    </div>
    
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Review 1 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-green-500 shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"The strategic guidance provided by this team was instrumental in our recent growth. Highly recommend their services!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-purple-500 shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Exceptional clarity and actionable insights. Our operations are far more efficient now. Five stars!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">John Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Founder, Global Ventures</p>
        </div>
      </div>

      <!-- Review 3 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-pink-500 shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Professional, insightful, and truly transformative for our business strategy. A pleasure to work with!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah Chen</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Director, Creative Agency</p>
        </div>
      </div>
    </div>
    
    <div class="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 p-6 sm:p-8 text-center">
      <p class="text-white text-md sm:text-lg font-medium">Ready to transform your business? <a href="#" class="underline font-bold hover:text-yellow-200 transition-colors">Contact us today!</a></p>
    </div>
  </div>
</div>

Verwandte Komponenten

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"

Eine komplexe Produktbewertungskomponente, die für ein Dashboard entwickelt wurde, mit 3D-Designelementen, Erdtönen und Unterstützung für den Dunkelmodus.

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