Компонент карт
Отзывчивый компонент для блога/карточки контента, выполненный в скевоморфном стиле и земляных тонах. Включает название, изображение, краткое описание и аватар для информации об авторе. Поддерживает темный режим.
HTML-код
<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
<div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="text-gray-800 dark:text-gray-200">
<p class="font-semibold">Author Name</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
</div>
</div>
</div>Связанные компоненты
Компонент карт
Отзывчивый компонент карточки портфолио с брутальным стилем дизайна, с использованием пастельной цветовой гаммы и умеренной сложности с интерактивными функциями. Эта карта демонстрирует работу или товары и поддерживает темный режим.
Компонент 3D-карт
Адаптивный компонент карточки со стилем 3D-дизайна, яркими цветами и множеством интерактивных элементов, подходящий для приборной панели. Он поддерживает темный режим с использованием темного префикса Tailwind.
Компонент скевоморфных карт
Простой компонент карточек, выполненный в скевоморфном стиле, с использованием аналогичной цветовой гаммы для чтения и потребления контента. Этот компонент является адаптивным и поддерживает темную тему.