Компонент компонентов мультимедиа
Адаптивный медиакомпонент с микровзаимодействиями и привлекательной анимацией, разработанный с помощью Tailwind CSS. Он поддерживает темную тему и включает в себя изображения-заполнители и аватары.
HTML-код
<div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
<img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
<div class="p-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
</div>
</div>Связанные компоненты
Industrial_Marketplace_Media_Component
Простой медиакомпонент в индустриальном стиле для маркетплейса с изображением, названием и ценой, с акцентом на сырье и утилитарную эстетику. Использует осенние цвета и поддерживает темный режим.
Компонент компонентов мультимедиа
Отзывчивая мультимедийная составляющая, вдохновленная стилями ретро/винтажного дизайна, с ностальгической эстетикой 80-х/90-х годов. Он поддерживает темную тему с Tailwind CSS и включает в себя замещающие изображения и аватары.
Компонент компонентов среды стекломорфизма
Медиакомпонент Glassmorphism с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS