Бруталистский компонент карты
Бруталистский компонент карты с адаптивным дизайном и поддержкой темного режима.
HTML-код
<div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto">
<img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image">
<h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2>
<p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<span class="text-black dark:text-white">John Doe</span>
</div>
<button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button>
</div>Связанные компоненты
Компонент скевоморфных карт
Простой компонент карточек, выполненный в скевоморфном стиле, с использованием аналогичной цветовой гаммы для чтения и потребления контента. Этот компонент является адаптивным и поддерживает темную тему.
Карта Material Design
Компонент карточки в стиле Material Design с адаптивным поведением и поддержкой темного режима с использованием Tailwind CSS. Особенности, эффекты рельефа и ряби, визуальные подсказки.
Компонент карты скевоморфизма
Отзывчивый компонент карт в стиле скевоморфизма с поддержкой темного режима с использованием Tailwind CSS. Он включает в себя изображения-заполнители и аватары.