Компонент Отзывы о товаре
Компонент обзоров продуктов в неморфном стиле, который включает в себя аватары пользователей, текст отзыва и звездные рейтинги. Он включает в себя адаптивный дизайн и поддержку темного режима с использованием Tailwind CSS.
HTML-код
<div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-gray-300 line-through">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
</div>
<p class="text-gray-600 dark:text-gray-300">This product is amazing! I loved everything about it. Highly recommend!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-gray-300 line-through">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
</div>
<p class="text-gray-600 dark:text-gray-300">Good product but needs improvement in quality.</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-gray-300 line-through">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
</div>
<p class="text-gray-600 dark:text-gray-300">Not worth the price, but still okay.</p>
</div>
</div>
</div>
<style>
.dark .shadow-lg {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.bg-white {
background: #e0e0e0;
border-radius: 20px;
}
.dark .bg-gray-800 {
background: #2c2c2c;
border-radius: 20px;
}
</style>Связанные компоненты
Компонент Отзывы о товаре
Сложный компонент обзоров продуктов, разработанный для приборной панели, с элементами 3D-дизайна, цветами земляных тонов и поддержкой темного режима.
Отзывы о товаре Компонент 6
Отзывчивый компонент обзора продукта, стилизованный в соответствии с принципами Material Design, поддерживающий светлые и темные темы.
Компонент Отзывы о товаре
Ретро/винтажный стиль, цветовая гамма земляных тонов, компонент обзоров товаров средней сложности с адаптивным дизайном и поддержкой темных тем. Использует Tailwind CSS для стилизации, picsum.photos для изображений товаров и randomuser.me для аватаров. Нет JavaScript.