Компонент Media Embed
Минималистичный компонент встраивания медиа, предназначенный для дашбордов с адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-xs mx-auto">
<div class="relative overflow-hidden rounded-lg">
<img src="https://picsum.photos/400/200" alt="Media" class="w-full h-48 object-cover rounded-lg">
</div>
<div class="mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300">
<div class="ml-4">
<h2 class="text-lg font-semibold dark:text-white">Media Title</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the media content goes here.</p>
</div>
</div>
<div class="mt-2">
<button class="bg-gray-800 text-white py-1 px-3 rounded hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Action Button</button>
</div>
</div>
</div>
Связанные компоненты
Компонент Media Embed
Компонент Media Embed, разработанный для электронной коммерции со стилем 3D-дизайна, дополнительной цветовой схемой и адаптивным макетом, поддерживающим темный режим.
Компонент Media Embed
Адаптивный компонент встраивания мультимедиа, выполненный в стиле неоморфизма, с яркими цветами и интерактивным интерфейсом, подходящим для приложений на приборных панелях.
Компонент Media Embed
Адаптивный компонент встраивания медиа для электронной коммерции с минималистичным дизайном, яркими цветами и поддержкой темного режима.