Сравнение бруталистских продуктов
Бруталистский компонент сравнения товаров для социальных сетей с монохроматической цветовой схемой и поддержкой темного режима
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>Связанные компоненты
Компонент сравнения продуктов
Сложный компонент сравнения продуктов, разработанный в соответствии с принципами Material Design, отличающийся яркой цветовой схемой и поддержкой темного режима. Идеально подходит для интерфейсов социальных сетей.
Компонент сравнения продуктов
Простой, отзывчивый компонент сравнения товаров с дизайном стекломорфизма, цветовой схемой земляных тонов и поддержкой темного режима. Он отображает две карточки товаров рядом друг с другом на больших экранах и складывается на меньшие экраны.
Компонент сравнения продуктов
Адаптивный компонент сравнения товаров, стилизованный в стиле ретро/винтаж 80-х/90-х годов, с поддержкой темных тем с помощью Tailwind CSS.