Cerca componenti

Categorie

Componenti Recensioni dei prodotti

Recensioni dei prodotti

Recensioni e valutazioni degli utenti per i prodotti

Recensioni dei prodotti Componente - Toni gioiello giocosi con messa a fuoco su prenotazione

Una componente complessa e giocosa per la recensione del prodotto con particolare attenzione alla prenotazione. Presenta colori dai toni gioiello, elementi arrotondati e piena reattività con il supporto della modalità oscura.

Aperto Anteprima

                <div class="font-sans antialiased text-gray-800 bg-emerald-50 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transform transition-all duration-500 scale-95 hover:scale-100 flex flex-col md:flex-row">
    
    <!-- Left Section: Overall Rating & Summary -->
    <div class="w-full md:w-1/3 p-6 sm:p-8 bg-emerald-600 dark:bg-emerald-800 text-white flex flex-col items-center justify-center text-center rounded-t-3xl md:rounded-l-3xl md:rounded-tr-none relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-700 to-emerald-500 opacity-20 dark:opacity-30"></div>
      <div class="relative z-10">
        <h2 class="text-4xl sm:text-5xl font-extrabold mb-2 leading-tight">4.8<span class="text-2xl">/5</span></h2>
        <div class="flex justify-center mb-4 text-yellow-300 dark:text-yellow-400">
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
        </div>
        <p class="text-lg sm:text-xl font-semibold mb-6">Based on 128 Reviews</p>
        <button class="bg-white text-emerald-600 dark:bg-emerald-700 dark:text-white px-8 py-3 rounded-full font-bold text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-500">
          Leave a Review
        </button>
      </div>
    </div>

    <!-- Right Section: Individual Reviews & Filter -->
    <div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col justify-between dark:text-gray-200">
      <div>
        <h3 class="text-2xl sm:text-3xl font-extrabold text-ruby-700 dark:text-ruby-400 mb-6">What our customers say</h3>
        
        <!-- Filter/Sorting -->
        <div class="flex flex-wrap gap-2 mb-6">
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-sapphire-600 dark:bg-sapphire-800 text-white rounded-full text-sm font-semibold hover:bg-sapphire-700 dark:hover:bg-sapphire-700 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-sapphire-300 dark:focus:ring-sapphire-600">
            All Reviews (128)
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-500">
            5 Stars (98)
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
            With Bookings
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
            Most Recent
          </button>
        </div>

        <!-- Review Items (Scrollable) -->
        <div class="space-y-6 max-h-96 md:max-h-[calc(100vh-250px)] overflow-y-auto pr-2 scrollbar-thumb-emerald-500 scrollbar-track-emerald-200 dark:scrollbar-thumb-emerald-700 dark:scrollbar-track-emerald-900 scrollbar-w-2 scrollbar-thumb-rounded scrollbar-track-rounded">

          <!-- Review 1 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Elara Vance</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Facial & Massage Package</span> on <time datetime="2023-10-26">Oct 26, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Absolutely loved my spa day! The facial left my skin glowing and the massage was incredibly relaxing. Highly recommend the staff, they were so friendly and professional!"</p>
            </div>
          </div>

          <!-- Review 2 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Marcus Thorne</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Deep Tissue Massage</span> on <time datetime="2023-10-20">Oct 20, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Good massage, felt much relief. The booking process was smooth and easy. Would book again for sure!"</p>
            </div>
          </div>

          <!-- Review 3 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Sophia Lee</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Aromatherapy Session</span> on <time datetime="2023-10-15">Oct 15, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Wonderful experience! The aromatherapy was exactly what I needed after a stressful week. The online booking was super user-friendly."</p>
            </div>
          </div>

           <!-- Review 4 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">David Chen</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Sports Massage</span> on <time datetime="2023-10-08">Oct 08, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Very effective sports massage after my marathon. Professional and understanding. I appreciate the easy booking system!"</p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* For a more custom scrollbar aligned with the playful theme */
.scrollbar-w-2::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thumb-emerald-500::-webkit-scrollbar-thumb {
  background-color: var(--tw-bg-emerald-500);
  border-radius: 9999px;
}

.scrollbar-track-emerald-200::-webkit-scrollbar-track {
  background-color: var(--tw-bg-emerald-200);
  border-radius: 9999px;
}

.dark .scrollbar-thumb-emerald-700::-webkit-scrollbar-thumb {
  background-color: var(--tw-bg-emerald-700);
}

.dark .scrollbar-track-emerald-900::-webkit-scrollbar-track {
  background-color: var(--tw-bg-emerald-900);
}

/* Custom colors (optional: if you want to extend tailwind.config.js) */
/* If you were using a Tailwind config, these would be in 'theme.extend.colors' */
:root {
  --color-emerald-50: #ecfdf5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e40;
  
  --color-sapphire-400: #60a5fa; /* A vibrant blue */
  --color-sapphire-600: #2563eb;
  --color-sapphire-800: #1e40af;

  --color-ruby-400: #ef4444; /* A vibrant red */
  --color-ruby-700: #b91c1c;
}
.dark {
  --tw-bg-emerald-50: #1a202c;
  --tw-bg-gray-900: #1a202c;
}
</style>

Componente delle recensioni dei prodotti

Un componente reattivo per le recensioni dei prodotti progettato per le interfacce dei social media, dotato di un'interfaccia utente in modalità scura con una combinazione di colori in scala di grigi. Include valutazioni, avatar utente, testo delle recensioni e un pulsante "Leggi di più".

Aperto Anteprima

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>

    <div class="space-y-6">
      <!-- Review 1 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">4.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future." 
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">John Smith</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">5.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
      </div>

      <!-- Review 3 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">Emily White</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">3.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
      </div>
    </div>
  </div>
</div>

Componente delle recensioni dei prodotti

Un componente semplice e reattivo per le recensioni dei prodotti con un'estetica di design 3D, una combinazione di colori in bianco e nero con un accento luminoso, progettato per CRM/Business Tools, incluso il supporto della modalità scura.

Aperto Anteprima

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 relative z-10">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">Customer Reviews</h2>
        <div class="flex items-center space-x-1">
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-gray-400 text-lg sm:text-xl">&#9733;</span>
          <span class="text-gray-600 dark:text-gray-400 text-sm sm:text-base font-medium">(4.5/5)</span>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-6">
        <!-- Review 1 -->
        <div class="bg-white dark:bg-gray-700 p-4 sm:p-6 rounded-lg shadow-md transform translate-z-10 hover:translate-z-20 transition-all duration-300 border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 object-cover border-2 border-indigo-500 dark:border-indigo-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <div>
              <p class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">CEO, Tech Solutions</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
            "This product has fundamentally changed how we manage our customer relationships. The intuitive interface and powerful features are a game-changer. Highly recommend!"
          </p>
          <div class="flex justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
            <span>Reviewed on Jan 15, 2024</span>
            <div class="flex items-center space-x-1 text-yellow-500">
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
            </div>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="bg-white dark:bg-gray-700 p-4 sm:p-6 rounded-lg shadow-md transform translate-z-10 hover:translate-z-20 transition-all duration-300 border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 object-cover border-2 border-indigo-500 dark:border-indigo-400" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of David Lee">
            <div>
              <p class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">David Lee</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Founder, Marketing Pro</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
            "Excellent support and a truly robust CRM solution. It helps us streamline our sales process and improve customer satisfaction significantly."
          </p>
          <div class="flex justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
            <span>Reviewed on Dec 28, 2023</span>
            <div class="flex items-center space-x-1 text-yellow-500">
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span class="text-gray-400 dark:text-gray-500">&#9733;</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition-shadow duration-300 transform translate-z-10 hover:translate-z-20 text-base sm:text-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          View All Reviews
        </button>
      </div>
    </div>
    <!-- Decorative '3D' element -->
    <div class="absolute inset-0 bg-gray-200 dark:bg-gray-950 -z-10 transform scale-105 rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 transition-all duration-500 ease-in-out opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="transform-origin: center center; filter: blur(50px);"></div>
  </div>
</div>

Neumorphic_Product_Reviews_Component_High_Contrast

Un componente neutromorfico complesso per le recensioni dei prodotti ad alto contrasto con funzioni di prenotazione, progettato per la reattività e la modalità scura, che offre un'interfaccia utente ricca e interattiva.

Aperto Anteprima

                <div class="min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center bg-gray-200 dark:bg-gray-800 font-sans">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 p-6 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
    
    <!-- Header -->
    <div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-300 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">Customer Reviews</h2>
      <button class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-xl text-gray-800 dark:text-gray-100 shadow-neumorphic-btn-light hover:shadow-neumorphic-btn-light-hover dark:shadow-neumorphic-btn-dark dark:hover:shadow-neumorphic-btn-dark-hover transition-all duration-200 ease-in-out">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        <span class="hidden sm:inline">Write a Review</span>
      </button>
    </div>

    <!-- Average Rating and Summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
      <div class="md:col-span-1 flex flex-col items-center justify-center">
        <div class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400 mb-2">4.8</div>
        <div class="flex text-yellow-500 mb-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Based on 1,234 reviews</p>
      </div>
      <div class="md:col-span-2 space-y-3">
        <!-- Star rating breakdown -->
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">5 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-green-500 rounded-full shadow-neumorphic-inset" style="width: 90%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">90%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">4 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full shadow-neumorphic-inset" style="width: 7%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">7%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">3 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-yellow-500 rounded-full shadow-neumorphic-inset" style="width: 2%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">2%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">2 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-orange-500 rounded-full shadow-neumorphic-inset" style="width: 0.5%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">0.5%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">1 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-red-500 rounded-full shadow-neumorphic-inset" style="width: 0.5%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">0.5%</span>
        </div>
      </div>
    </div>

    <!-- Review Filters/Sort -->
    <div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0">
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-gray-200 dark:bg-gray-800 border-none text-gray-800 dark:text-gray-100 py-3 pl-4 pr-10 rounded-xl shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 ease-in-out">
          <option>Most Recent</option>
          <option>Highest Rated</option>
          <option>Lowest Rated</option>
          <option>With Photos</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <input type="text" placeholder="Search reviews..." class="block w-full bg-gray-200 dark:bg-gray-800 border-none text-gray-800 dark:text-gray-100 py-3 pl-4 pr-10 rounded-xl shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 ease-in-out">
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-700 dark:text-gray-200">
          <svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.35zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
        </div>
      </div>
    </div>

    <!-- Review List -->
    <div class="space-y-8">

      <!-- Review Item 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Doe</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Absolutely fantastic experience! The process was smooth, and the results exceeded my expectations. Highly recommend!"</p>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-4">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark" src="https://picsum.photos/300/200?random=1" alt="Review photo 1">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark" src="https://picsum.photos/300/200?random=11" alt="Review photo 2">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark hidden sm:block" src="https://picsum.photos/300/200?random=12" alt="Review photo 3">
        </div>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (12)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

      <!-- Review Item 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John Smith</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 week ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Good service, but communication could be a little quicker. Overall satisfied with the appointment."</p>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (5)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

      <!-- Review Item 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Emily White</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">3 weeks ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Flawless! From start to finish, everything was perfect. Made a reservation for next month already."</p>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (19)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

    </div>

    <!-- Pagination -->
    <div class="flex justify-center mt-8 space-x-2">
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out"><<</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out"><</button>
      <button class="w-10 h-10 flex items-center justify-center bg-indigo-600 dark:bg-indigo-700 text-white font-bold rounded-lg shadow-neumorphic-btn-active-light dark:shadow-neumorphic-btn-active-dark transition-all duration-200 ease-in-out">1</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">2</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">3</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">></button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">>></button>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Shadow Styles */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #2e2e2e, -8px -8px 16px #444444;
  }

  /* Button Shadow Styles */
  .shadow-neumorphic-btn-light {
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
  }
  .shadow-neumorphic-btn-light:hover {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 4px 4px 8px #2e2e2e, -4px -4px 8px #444444;
  }
  .dark .shadow-neumorphic-btn-dark:hover {
    box-shadow: inset 2px 2px 5px #2e2e2e, inset -2px -2px 5px #444444;
  }

  /* Small Button Shadow Styles */
  .shadow-neumorphic-btn-small-light {
    box-shadow: 2px 2px 4px #a3b1c6, -2px -2px 4px #ffffff;
  }
  .shadow-neumorphic-btn-small-light:hover {
    box-shadow: inset 1px 1px 3px #a3b1c6, inset -1px -1px 3px #ffffff;
  }
  .dark .shadow-neumorphic-btn-small-dark {
    box-shadow: 2px 2px 4px #2e2e2e, -2px -2px 4px #444444;
  }
  .dark .shadow-neumorphic-btn-small-dark:hover {
    box-shadow: inset 1px 1px 3px #2e2e2e, inset -1px -1px 3px #444444;
  }

  /* Active Button Shadow Styles */
  .shadow-neumorphic-btn-active-light {
    box-shadow: inset 4px 4px 8px #8850c1, inset -4px -4px 8px #6c329b;
  }
  .dark .shadow-neumorphic-btn-active-dark {
    box-shadow: inset 4px 4px 8px #4a276b, inset -4px -4px 8px #7a469f;
  }

  /* Card Shadow Styles */
  .shadow-neumorphic-card-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-card-dark {
    box-shadow: 6px 6px 12px #2e2e2e, -6px -6px 12px #444444;
  }

  /* Avatar Shadow Styles */
  .shadow-neumorphic-avatar-light {
    box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-avatar-dark {
    box-shadow: 3px 3px 6px #2e2e2e, -3px -3px 6px #444444;
  }

  /* Image Shadow Styles */
  .shadow-neumorphic-image-light {
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-image-dark {
    box-shadow: 4px 4px 8px #2e2e2e, -4px -4px 8px #444444;
  }

  /* Inner Shadow for Progress Bars/Inputs */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 2px 2px 5px #2e2e2e, inset -2px -2px 5px #444444;
  }

  /* Inset shadow for active progress bar fill */
  .shadow-neumorphic-inset {
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(255,255,255,0.4);
  }
</style>

Playful_Ocean_Product_Reviews_Component_Real_Estate

Un componente semplice, giocoso e allegro per le recensioni dei prodotti progettato per le piattaforme immobiliari. Presenta elementi arrotondati, una vivace combinazione di colori oceano/blu e una reattività completa con il supporto della modalità oscura.

Aperto Anteprima

                <section class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden">
    <div class="p-6 sm:px-8 sm:py-7 bg-gradient-to-r from-blue-400 to-sky-500 dark:from-blue-700 dark:to-sky-800 text-white text-center rounded-t-3xl">
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-2">What Our Clients Say!</h2>
      <p class="text-blue-100 dark:text-blue-200 text-lg sm:text-xl font-medium">Hear from happy property owners.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8">
      <!-- Review 1 -->
      <div class="bg-blue-50 dark:bg-gray-700 p-5 rounded-2xl shadow-md transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg">
        <div class="flex items-center mb-4">
          <img class="w-14 h-14 rounded-full border-4 border-sky-300 dark:border-sky-500 mr-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client Avatar">
          <div>
            <p class="font-bold text-lg text-blue-900 dark:text-blue-100">Sarah J.</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Home Buyer</p>
          </div>
        </div>
        <div class="flex mb-3">
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
        </div>
        <p class="text-blue-800 dark:text-blue-200 leading-relaxed">"I found my dream home thanks to their amazing team! The process was so easy and the support was incredible. Highly recommend for anyone looking to buy or sell property."</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-blue-50 dark:bg-gray-700 p-5 rounded-2xl shadow-md transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg">
        <div class="flex items-center mb-4">
          <img class="w-14 h-14 rounded-full border-4 border-sky-300 dark:border-sky-500 mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client Avatar">
          <div>
            <p class="font-bold text-lg text-blue-900 dark:text-blue-100">Mark T.</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Property Investor</p>
          </div>
        </div>
        <div class="flex mb-3">
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          <svg class="w-5 h-5 text-yellow-400 fill-current" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
        </div>
        <p class="text-blue-800 dark:text-blue-200 leading-relaxed">"Excellent service! Their insights into the current market were invaluable, helping me secure a fantastic investment property. Professional, responsive, and truly experts in real estate."</p>
      </div>

      <!-- Add more reviews here if needed -->

    </div>
    <div class="p-6 sm:px-8 sm:py-7 bg-blue-100 dark:bg-gray-900 border-t border-blue-200 dark:border-gray-700 text-center rounded-b-3xl">
      <p class="text-blue-700 dark:text-blue-300 text-base sm:text-lg">Ready to find your perfect place? <span class="font-semibold">Contact us today!</span></p>
    </div>
  </div>
</section>

Recensioni prodotto Skeuomorphic Componente - Blu oceano

Un componente di revisione del prodotto di complessità moderata progettato con uno stile scheumorfico, che utilizza i toni dell'oceano/blu per scopi aziendali/aziendali. È dotato di un design reattivo, supporto per la modalità oscura ed elementi interattivi.

Aperto Anteprima

                <div class="font-sans antialiased bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">

  <!-- Reviews Container -->
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-700 dark:to-gray-700 shadow-neu dark:shadow-neu-dark rounded-xl p-6 sm:p-8 lg:p-10 border-t border-l border-blue-100 dark:border-gray-600 relative overflow-hidden">
    <div class="absolute inset-0 bg-blue-300 dark:bg-gray-800 opacity-20 dark:opacity-10 rounded-xl pointer-events-none"></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center drop-shadow-md relative z-10">
      What Our Customers Say
    </h2>

    <!-- Overall Rating Section -->
    <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 mb-8 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700 relative z-10">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <p class="text-6xl font-bold text-blue-800 dark:text-blue-200">4.8</p>
          <div class="flex justify-center sm:justify-start mt-1">
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
          </div>
          <p class="text-blue-700 dark:text-blue-300 text-sm mt-1">(Based on 2,543 reviews)</p>
        </div>
        <button class="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full shadow-md neumorph-btn dark:neumorph-btn-dark active:scale-95 transition-all duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>
          <span>Write a Review</span>
        </button>
      </div>
    </div>

    <!-- Review List -->
    <div class="space-y-6 relative z-10">

      <!-- Review Item 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">John Doe</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Absolutely stellar service!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          I was thoroughly impressed with the professionalism and efficiency. The product exceeded my expectations and functionality is truly top-notch. Highly recommended for any business looking to enhance their operations.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on January 15, 2024</p>
      </div>

      <!-- Review Item 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">Jane Smith</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"A game changer for our team!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          The customer support was responsive and helpful, guiding us through setup seamlessly. This product has significantly improved our workflow and team collaboration. We couldn't be happier with our investment.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 01, 2024</p>
      </div>

      <!-- Review Item 3 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">Emily White</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.165 2.508c-.282-.877-1.564-.877-1.846 0l-1.09 3.376a1 1 0 01-.97.7h-3.56c-.958 0-1.353 1.24.57 1.81l2.88 2.09c.31.226.467.625.352 1.01l-1.09 3.377c-.282.877.747 1.6.973 1.01l2.88-2.09c.31-.226.744-.226 1.054 0l2.88 2.09c.226.59.973-.133.691-1.01l-1.09-3.377a1 1 0 01.352-1.01l2.88-2.09c1.923-.57.928-1.81-.352-1.81h-3.56a1 1 0 01-.97-.7l-1.09-3.376z" clip-rule="evenodd" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Very pleased with this purchase!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          The product seamlessly integrates with our existing systems, and the learning curve was minimal. It's a robust solution that delivers on its promises. Our team's productivity has noticeably increased.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 10, 2024</p>
      </div>

    </div>
  </div>

  <!-- Custom Styles for Skeuomorphism -->
  <style>
    .shadow-neu {
      box-shadow: 8px 8px 16px #9ecbf2, -8px -8px 16px #d8f1ff;
    }
    .shadow-neu-dark {
      box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
    }
    .shadow-inner-neu {
      box-shadow: inset 5px 5px 10px #b1d8f7, inset -5px -5px 10px #e1f4ff;
    }
    .shadow-inner-neu-dark {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
    }
    .neumorph-btn {
        box-shadow: 4px 4px 8px rgba(0,0,0,0.2), -4px -4px 8px rgba(255,255,255,0.7),
                    inset 0.5px 0.5px 1px rgba(255,255,255,0.5), inset -0.5px -0.5px 1px rgba(0,0,0,0.1);
    }
    .neumorph-btn-dark {
        box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #525252,
                    inset 0.5px 0.5px 1px rgba(255,255,255,0.1), inset -0.5px -0.5px 1px rgba(0,0,0,0.3);
    }
    .neumorph-btn:active {
        box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.7),
                    0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
    }
    .neumorph-btn-dark:active {
        box-shadow: inset 4px 4px 8px #2a2a2a, inset -4px -4px 8px #525252,
                    0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
    }
  </style>

  <!-- You can add a dark mode toggle script if needed, here's a placeholder comment -->
  <!-- <script>
    // Example Toggle Script (requires some JS, not part of the HTML-only output)
    document.documentElement.classList.toggle('dark');
  </script> -->

</div>

Recensioni prodotto Componente - Carta/Stampa-Neon/Elettrico

Un componente semplice e reattivo per le recensioni dei prodotti con un design ispirato alla carta/stampa e una combinazione di colori neon/elettrico, adatto per la documentazione o i siti wiki. Include il supporto per la modalità oscura.

Aperto Anteprima

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">

  <!-- Review Card Container -->
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Review Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
                relative transition-all duration-300 ease-in-out
                hover:scale-[1.01] hover:shadow-2xl hover:border-fuchsia-500 dark:hover:border-lime-400
                p-6 sm:p-8">
      
      <!-- Corner Fold Effect -->
      <div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-fuchsia-400 dark:border-r-lime-400 border-t-transparent border-l-transparent
                  transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>
      
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-fuchsia-400 dark:border-lime-400 object-cover mr-4">
        <div>
          <p class="font-semibold text-lg text-fuchsia-600 dark:text-lime-400">Alice Johnson</p>
          <div class="flex mt-1">
            <!-- Star Rating (Neon Blue) -->
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
          </div>
        </div>
      </div>
      <h3 class="text-xl font-bold mb-3 text-fuchsia-700 dark:text-lime-300">"Absolutely fantastic!"</h3>
      <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
        This product exceeded my expectations. The documentation is clear and concise, making it incredibly easy to set up and use.
        Highly recommend for anyone seeking reliability and performance. A true game-changer!
      </p>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
    </div>

    <!-- Review Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
                relative transition-all duration-300 ease-in-out
                hover:scale-[1.01] hover:shadow-2xl hover:border-sky-500 dark:hover:border-cyan-400
                p-6 sm:p-8">
      
      <!-- Corner Fold Effect -->
      <div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-sky-400 dark:border-r-cyan-400 border-t-transparent border-l-transparent
                  transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>

      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-sky-400 dark:border-cyan-400 object-cover mr-4">
        <div>
          <p class="font-semibold text-lg text-sky-600 dark:text-cyan-400">Mark Davis</p>
          <div class="flex mt-1">
            <!-- Star Rating (Neon Pink) -->
            <svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
          </div>
        </div>
      </div>
      <h3 class="text-xl font-bold mb-3 text-sky-700 dark:text-cyan-300">"Good, but room for improvement."</h3>
      <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
        The product works as advertised, and the core functionality is solid. Some sections of the documentation could be more detailed,
        especially for advanced users. Overall, a useful tool with potential.
      </p>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
    </div>

  </div>

  <!-- Optional: Add a call to action or overall rating section -->
  <div class="max-w-4xl mx-auto text-center mt-12 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-4 border-gray-300 dark:border-gray-700
              relative overflow-hidden group">
    
    <!-- Faint diagonal striped overlay for paper effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-100/10 to-transparent dark:via-gray-900/10 opacity-20
                transform rotate-45 scale-150 pointer-events-none z-0"></div>
    
    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-blue-700 dark:text-cyan-300 mb-4 tracking-tight">
        What People Say About Us
      </h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
        We value your feedback! Leave a review and help us improve.
      </p>
      <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-sm
                        text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500
                        dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-400
                        transform transition-all duration-300 ease-out
                        hover:scale-105 active:scale-95
                        group-hover:ring-offset-lime-300 dark:group-hover:ring-offset-fuchsia-300 
                        group-hover:ring-fuchsia-500 dark:group-hover:ring-lime-400 group-hover:ring-2">
        Submit Your Review
        <svg class="ml-3 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
        </svg>
      </a>
    </div>
  </div>

</div>

Componente Recensioni dei prodotti di gioco

Un componente giocoso e vivace per le recensioni dei prodotti per i siti Web di gioco, con elementi arrotondati, colori ad alta saturazione e un'interfaccia ricca con valutazioni a stelle, avatar degli utenti, testo delle recensioni e pulsanti Mi piace/Non mi piace. Completamente reattivo con supporto per la modalità oscura.

Aperto Anteprima

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 via-pink-900 to-indigo-900 rounded-3xl shadow-2xl max-w-4xl mx-auto transform hover:scale-105 transition-all duration-300">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 drop-shadow-lg leading-tight">
      Player Reviews
    </h2>
    <div class="relative group">
      <button class="px-4 py-2 sm:px-6 sm:py-3 bg-yellow-400 hover:bg-yellow-500 text-purple-900 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-purple-100 font-bold rounded-full shadow-lg transition-all duration-300 transform active:scale-95 flex items-center">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        Write a Review
      </button>
      <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg p-3 text-sm text-gray-800 dark:text-gray-200 right-0 mt-2 whitespace-nowrap shadow-xl z-10 animate-fade-in-down">
        Share your experience!
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
    <!-- Review Card 1 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-yellow-400 dark:border-yellow-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-purple-400 dark:border-purple-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300">PlayerOne</h3>
          <time datetime="2023-01-15" class="text-sm text-gray-500 dark:text-gray-400">January 15, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">4.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "Highly addictive gameplay! I've lost countless hours to this game, and I don't regret a single one. The graphics are stunning, and the storyline keeps you totally engaged. A must-play for any serious gamer. The multiplayer could use some tweaks, but overall, solid."
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">123</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">5</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>

    <!-- Review Card 2 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-green-400 dark:border-green-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-400 dark:border-pink-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-green-700 dark:text-green-300">PixelQueen</h3>
          <time datetime="2023-01-20" class="text-sm text-gray-500 dark:text-gray-400">January 20, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">5.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "Absolutely gorgeous game! The art style is unique and the characters are so charming. Every level feels fresh, and the puzzles are just challenging enough to be fun without being frustrating. Highly recommend for a relaxing yet engaging experience. Best game I've played all year!"
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">256</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">12</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>

    <!-- Review Card 3 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-orange-400 dark:border-orange-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-green-400 dark:border-green-600 object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Avatar of Alex Gamer">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-orange-700 dark:text-orange-300">ArcadeKing</h3>
          <time datetime="2023-01-25" class="text-sm text-gray-500 dark:text-gray-400">January 25, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">3.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "It's okay. Decent graphics but the controls are a bit clunky on PC. I had to remap a lot of keys. The story is pretty standard, nothing groundbreaking. Fun for a few hours, but then it gets repetitive. Good time-waster, but probably won't revisit often."
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">78</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">45</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>

    <!-- Review Card 4 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-blue-400 dark:border-blue-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-400 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar of Sarah Code">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-700 dark:text-blue-300">CodeMaiden</h3>
          <time datetime="2023-01-28" class="text-sm text-gray-500 dark:text-gray-400">January 28, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">4.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "Pretty solid experience, especially with friends. The co-op mode is a blast! Some minor bugs here and there, but nothing game-breaking. Updates seem to come regularly, which is a good sign. It runs smoothly even on older hardware, which is a big plus for me."
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">99</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">10</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>
  </div>

  <div class="flex justify-center mt-8">
    <button class="px-6 py-3 bg-pink-500 hover:bg-pink-600 text-white dark:bg-pink-700 dark:hover:bg-pink-800 font-bold rounded-full shadow-lg transition-all duration-300 transform active:scale-95 flex items-center">
      <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      Load More Reviews
    </button>
  </div>
</div>

<style>
  /* Add some playful custom animations if needed, though Tailwind mostly covers. */
  /* Example: */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.4s ease-out;
  }

  /* For line-clamp replacement since it's a CSS property, not a Tailwind class directly for utility classes */
  .line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Custom scrollbar for playful feel - optional and browser specific */
  .no-scrollbar::-webkit-scrollbar {
      display: none;
  }

  .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }
</style>

Componente delle recensioni dei prodotti

Un componente semplice e reattivo per le recensioni dei prodotti con un design organico/ispirato alla natura, toni seppia/marrone, supporto per la modalità oscura e adatto per piattaforme di intrattenimento/multimediali.

Aperto Anteprima

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-xl shadow-lg overflow-hidden border border-amber-200 dark:border-stone-700 mx-auto">
    <div class="p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">What Our Viewers Say</h2>

      <!-- Review 1 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Alice J.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Absolutely captivated! The storyline was so immersive, and the visuals were stunning. A truly unique experience that felt both fresh and familiar."</p>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Davis">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Mark D.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current text-amber-200 dark:text-stone-500" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Great content for a relaxing evening. The pacing was perfect, and the character development was surprisingly deep. Definitely recommend it!"</p>
        </div>
      </div>
      
      <!-- Review 3 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Sophia Lee">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Sophia L.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"A cinematic masterpiece! The production quality was top-notch, and the music score was simply breathtaking. It truly transported me to another world."</p>
        </div>
      </div>

    </div>
  </div>
</div>

Retro_Vintage_Product_Reviews_Component

Un componente semplice e reattivo per le recensioni dei prodotti con un'estetica retrò/vintage, che utilizza toni blu professionali adatti ad aziende manifatturiere/industriali. Include il supporto per la modalità scura.

Aperto Anteprima

                <section class="font-mono bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-12 uppercase tracking-wider text-blue-800 dark:text-blue-200 border-b-4 border-blue-600 dark:border-blue-400 pb-4 inline-block mx-auto">
      Customer Feedback Terminal
    </h2>

    <div class="grid gap-8 sm:grid-cols-1 lg:grid-cols-2">
      <!-- Review Card 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue- সহায়-400 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Jasper 'The Cog' Milligan</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Production Manager</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "This machinery is a workhorse! Precision engineering from a bygone era, but with modern reliability. Integrates seamlessly with our existing setup. A true industrial classic!"
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Octane 23, 1997</p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Eleanor 'The Spark' Vance</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Lead Engineer, Robotics Division</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "Absolutely fantastic! The build quality reminds me of the good old days – robust and reliable. It handles extreme conditions without a hitch. A crucial asset for our high-tech industrial applications."
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Nov 14, 1998</p>
      </div>

    </div>
  </div>
</section>