Компонент встраивания мультимедиа 14
Компонент Media Embed, выполненный в скевоморфном стиле, с отзывчивыми эффектами и поддержкой темных тем. Он включает в себя изображение, описание и аватар пользователя.
HTML-код
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8"> <div class="relative"> <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/> <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2"> <span>Featured Media</span> </div> </div> <div class="mt-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2> <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p> </div> <div class="flex items-center mt-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/> <div class="ml-3"> <p class="text-gray-800 dark:text-white font-semibold">John Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p> </div> </div></div>Связанные компоненты
Компонент Media Embed
Адаптивный компонент Media Embed, стилизованный в скевоморфной манере, с использованием цветов тона Earth и подходящий для электронной коммерции, с поддержкой темных тем.
Brutalist_Retro_Media_Embed_E-коммерция
Сложный, отзывчивый компонент встраивания медиа в бруталистском стиле для электронной коммерции, отличающийся высокой контрастностью, цветовой палитрой в стиле ретро, поддержкой темного режима и множеством интерактивных элементов для демонстрации продуктов.
Компонент Media Embed
Адаптивный компонент Media Embed Component, разработанный со скевоморфизмом и использующий монохроматическую цветовую схему. Он включает в себя видеоплеер, раздел расшифровки и кнопки «Поделиться» в социальных сетях. Дизайн поддерживает темный режим и построен с помощью Tailwind CSS.