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

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

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

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

HTML-код

<div class="container mx-auto p-4 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
  </div>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>

</div>

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

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

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

Открытый

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

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

Открытый

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

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

Открытый