Компонент сравнения продуктов
Простой компонент сравнения товаров, разработанный для пользовательского интерфейса темного режима с использованием цветовой схемы в оттенках серого. Он имеет базовую верстку с минимальным количеством элементов, идеально подходит для контента блога и чтения.
HTML-код
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-xl font-bold mb-4">Product Comparison</h2>
<table class="min-w-full">
<thead>
<tr class="bg-gray-700">
<th class="px-4 py-2">Feature</th>
<th class="px-4 py-2">Product A</th>
<th class="px-4 py-2">Product B</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Price</td>
<td class="px-4 py-2">$199</td>
<td class="px-4 py-2">$249</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Rating</td>
<td class="px-4 py-2">⭐⭐⭐⭐</td>
<td class="px-4 py-2">⭐⭐⭐⭐⭐</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Warranty</td>
<td class="px-4 py-2">1 Year</td>
<td class="px-4 py-2">2 Years</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Image</td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=1" alt="Product A" class="rounded" /></td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=2" alt="Product B" class="rounded" /></td>
</tr>
</tbody>
</table>
<div class="flex justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
<span class="ml-2">Reviewed by John Doe</span>
</div>
<a href="#" class="text-blue-400 hover:underline">Read More</a>
</div>
</div>Связанные компоненты
Компонент сравнения продуктов
Отзывчивый компонент сравнения товаров с поддержкой темной темы, отличающийся минималистичным/плоским дизайном и пастельной цветовой гаммой. Этот сложный компонент подходит для информационных панелей, позволяя пользователям сравнивать несколько продуктов с подробными спецификациями и интерактивными элементами.
Компонент сравнения продуктов
Сложный компонент сравнения продуктов, разработанный в соответствии с принципами Material Design, отличающийся яркой цветовой схемой и поддержкой темного режима. Идеально подходит для интерфейсов социальных сетей.
Компонент сравнения продуктов
Адаптивный компонент сравнения товаров с 3D-подобными элементами дизайна, поддержкой темных тем и интеграцией изображений-заполнителей для визуализации товаров и аватаров пользователей с помощью picsum.photos и randomuser.me.