Компоненты Встраивание медиафайлов Компонент Media Embed

Компонент 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>

Связанные компоненты

Компонент встраивания мультимедиа в стиле ретро

Отзывчивый компонент встраивания мультимедиа с дизайном в стиле «ретро/винтаж», вдохновленный эстетикой 80-х/90-х годов, такой как старые ЭЛТ-мониторы и видеомагнитофоны. Он использует дополнительную цветовую гамму бирюзового и оранжевого на грифельно-серой основе, подходящую для веб-сайтов «Бизнес/Корпоративный». Компонент отличается умеренной сложностью с эффектами наведения на кнопку воспроизведения и миниатюру мультимедиа, искусственную световую анимацию REC и декоративные нефункциональные элементы управления. Он включает в себя поддержку темной темы с использованием префикса Tailwind 'dark:'. Медиа-область рассчитана на соотношение сторон 16:9 (требуется плагин Tailwind aspect-ratio или резервный CSS-вариант, такой как трюк с отступом внизу). Используется изображение-заполнитель из picsum.photos.

Открытый