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

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

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

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

HTML-код

<div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
  <div class="space-y-4">
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9734;
          </span>
          <span class="ml-2 text-sm text-gray-400">4.0</span>
        </div>
        <p class="text-gray-300">Great product! Highly recommend it to others.</p>
        <span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9733;
          </span>
          <span class="ml-2 text-sm text-gray-400">5.0</span>
        </div>
        <p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
        <span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9732;&#9732;
          </span>
          <span class="ml-2 text-sm text-gray-400">3.0</span>
        </div>
        <p class="text-gray-300">It's okay, but I expected better quality.</p>
        <span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
      </div>
    </div>
  </div>
</div>

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

Компонент Neumorphic Product Reviews

Простой, отзывчивый компонент обзоров товаров с нейроморфным дизайном, аналогичной цветовой гаммой и поддержкой темного режима, подходящий для деловых или корпоративных сайтов.

Открытый

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

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

Открытый

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

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

Открытый