Компонент рейтинговой системы
Адаптивный веб-компонент для оценки элементов со скевоморфным дизайном, имитирующим реальные аналоги. Подходит для демонстрации работ или товаров в портфолио.
HTML-код
<div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
<h2 class="text-xl font-bold mb-4">Rating System</h2>
<div class="flex items-center mb-6">
<img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
<div>
<h3 class="text-lg font-semibold">Product Name</h3>
<p class="text-gray-400">Product description goes here.</p>
<div class="flex items-center mt-2">
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-500">(3/5)</span>
</div>
</div>
</div>
<h4 class="text-md font-semibold mb-3">User Reviews</h4>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">John Doe</span>
<span class="text-gray-400 ml-2">5 hours ago</span>
</div>
<p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
</div>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">Jane Smith</span>
<span class="text-gray-400 ml-2">3 hours ago</span>
</div>
<p class="text-gray-300">Not what I expected, but decent quality overall.</p>
</div>
<div class="flex items-center justify-between mt-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
</div>
</div>Связанные компоненты
Компонент рейтинговой системы
Компонент рейтинговой системы в стиле glassmorphic, подходящий для портфолио, демонстрирующего работы или продукты, с адаптивным дизайном и поддержкой темных тем.
Компонент системы рейтинга брутализма
Отзывчивый компонент рейтинговой системы, разработанный в стиле брутализма с использованием Tailwind CSS, с поддержкой темных тем.
Компонент рейтинговой системы
Отзывчивый компонент рейтинговой системы, разработанный в стиле брутализма с использованием Tailwind CSS. Он поддерживает темную тему и отличается высокой контрастностью с грубым и смелым дизайном.