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

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

Ретро/винтажный стиль, цветовая гамма земляных тонов, компонент обзоров товаров средней сложности с адаптивным дизайном и поддержкой темных тем. Использует 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

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

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

Компонент «Обзоры товаров» с Material Design, адаптивными эффектами и поддержкой темных тем.

Открытый

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

Компонент обзоров товаров с элементами 3D-дизайна, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.

Открытый

Компонент для отзывов о товаре (скевоморфная пастель)

Сложный и отзывчивый компонент обзоров товаров, стилизованный под скевоморфную эстетику дизайна с использованием пастельных тонов и поддержкой темного режима. Многослойные карты, тонкие градиенты и тени для создания глубины. Включает аватар, имя, звездный рейтинг, текст отзыва и необязательные изображения. Использует исключительно Tailwind CSS без JavaScript.

Открытый