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

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

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

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

HTML-код

<div class="antialiased w-full">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="mb-6 md:mb-8">
            <span class="text-lg text-blue-500 font-bold">Reviews</span>
            <h2 class="text-3xl md:text-4xl mt-2 font-bold font-heading">Customer Reviews</h2>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Alice Williams</p>
                  <p class="text-sm text-gray-500">January 20, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-gray-300 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"Absolutely love this product! The quality is top-notch, and it exceeded my expectations. Highly recommend it to everyone."</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Robert Johnson</p>
                  <p class="text-sm text-gray-500">January 18, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"This is by far the best purchase I

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

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

Отзывчивый компонент обзора продукта, стилизованный в соответствии с принципами Material Design, поддерживающий светлые и темные темы.

Открытый

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

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

Открытый

Компонент обзоров игровых продуктов

Игривый и яркий компонент обзоров продуктов для игровых сайтов с округлыми элементами, насыщенными цветами и богатым интерфейсом с рейтингами, аватарами пользователей, текстом отзыва и кнопками «Нравится/не нравится». Полностью адаптивный с поддержкой темного режима.

Открытый