Сравнение бруталистских продуктов
Бруталистский компонент сравнения товаров для социальных сетей с монохроматической цветовой схемой и поддержкой темного режима
HTML-код
<div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
<h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
<div class="grid grid-cols-2 gap-4">
<div class="border-2 border-zinc-900 dark:border-white p-4">
<h3 class="text-xl font-semibold mb-2">Product A</h3>
<img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
<ul class="list-disc list-inside">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
<div class="border-2 border-zinc-900 dark:border-white p-4">
<h3 class="text-xl font-semibold mb-2">Product B</h3>
<img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
<ul class="list-disc list-inside">
<li>Feature X</li>
<li>Feature Y</li>
<li>Feature Z</li>
</ul>
</div>
</div>
</div>Связанные компоненты
Компонент сравнения продуктов
Простой, отзывчивый компонент сравнения товаров с дизайном стекломорфизма, цветовой схемой земляных тонов и поддержкой темного режима. Он отображает две карточки товаров рядом друг с другом на больших экранах и складывается на меньшие экраны.
Компонент сравнения продуктов
Компонент сравнения товаров со стилем оформления Скевоморфизм, Пастельной цветовой гаммой и Умеренным уровнем сложности, предназначенный для дашбордов. Он включает в себя адаптивный дизайн и поддержку темной темы с использованием Tailwind CSS.
Компонент сравнения продуктов
Компонент сравнения продуктов класса люкс и премиум-класса для фотооборудования, отличающийся элегантным дизайном, сложной типографикой и высококонтрастной цветовой схемой. Включает поддержку адаптивного макета и темного режима.