Components Product Reviews Product Reviews Component

Product Reviews Component

Retro/Vintage style, Earth tones color scheme, Moderate complexity Product Reviews Component with responsive design and dark theme support. Uses Tailwind CSS for styling, picsum.photos for product images, and randomuser.me for avatars. No JavaScript.

Preview

HTML Code

<div class="container mx-auto p-4 font-mono">
  <!-- Light Mode -->
  <div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
    <h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Review 1 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">John Doe</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star_half</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
        <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
      </div>
      <!-- Review 2 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">Jane Smith</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"I

Related Components

Product Reviews Component (Skeuomorphic Pastel)

A complex and responsive Product Reviews component styled with a Skeuomorphic design aesthetic using pastel colors and supporting dark mode. Features layered cards, subtle gradients, and shadows to create depth. Includes avatar, name, star rating, review text, and optional images. Uses Tailwind CSS exclusively with no JavaScript.

Open

Gaming Product Reviews Component

A playful and vibrant product reviews component for gaming websites, featuring rounded elements, high-saturation colors, and a rich interface with star ratings, user avatars, review text, and like/dislike buttons. Fully responsive with dark mode support.

Open

Product Reviews Component

A responsive product reviews component designed for dark mode with a vibrant color scheme, suitable for business/corporate websites. It features user avatars, review ratings, and user comments in an interactive layout.

Open