Компоненты Отзывы о товаре Компонент Отзывы о товаре

Компонент Отзывы о товаре

Ретро/винтажный стиль, цветовая гамма земляных тонов, компонент обзоров товаров средней сложности с адаптивным дизайном и поддержкой темных тем. Использует Tailwind CSS для стилизации, picsum.photos для изображений товаров и randomuser.me для аватаров. Нет JavaScript.

Предварительный просмотр

HTML-код

<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

Связанные компоненты

Компонент Отзывы о товаре

Адаптивный компонент обзоров товаров, созданный с помощью Tailwind CSS, с микровзаимодействиями при наведении, поддержкой темной темы и изображениями-заполнителями. JavaScript не используется.

Открытый

Скевоморфный компонент для отзывов о продукте - Ocean Blue

Компонент обзора продукта средней сложности, выполненный в скевоморфном стиле, с использованием океанских/голубых тонов для деловых/корпоративных целей. Он отличается адаптивным дизайном, поддержкой темного режима и интерактивными элементами.

Открытый

Компонент Отзывы о товаре

Компонент "Обзоры товаров" с использованием Tailwind CSS со стилем Neumorphism, адаптивными эффектами и поддержкой темной темы. Код JavaScript не включен. Используются изображения-заполнители и аватары.

Открытый