Компонент Отзывы о товаре
Отзывчивый компонент отзывов о товарах с брутальным дизайном, Монохроматическая цветовая схема, Сложная сложность для электронной коммерции, с поддержкой темных тем
HTML-код
<div class="bg-gray-900 text-white p-8 min-h-screen">
<div class="container mx-auto">
<h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Review Card 1 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Sarah Johnson</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 2 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">David Chen</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 3 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Emily Davis</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Good value for the price."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 4 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Michael Brown</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Solid product, works as expected."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Скевоморфный компонент для отзывов о продукте - Ocean Blue
Компонент обзора продукта средней сложности, выполненный в скевоморфном стиле, с использованием океанских/голубых тонов для деловых/корпоративных целей. Он отличается адаптивным дизайном, поддержкой темного режима и интерактивными элементами.
Компонент «Отзывы о товаре»
Компонент обзора продуктов моды и красоты, вдохновленный киберпанком, с акцентами землистых тонов на темном фоне. Он отзывчив и включает поддержку темного режима.
Компонент для отзывов о продукте - бумага/печать-неоновый/электрический
Простой, отзывчивый компонент обзоров продуктов с дизайном, вдохновленным бумагой/печатью, и неоново-электрической цветовой схемой, подходящий для документации или вики-сайтов. Включает поддержку темного режима.