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

Компонент Media Embed

Компонент встраивания медиа в стиле Neumorphism, подходящий для потребления блогов и контента, с триадической цветовой схемой. Адаптивный дизайн с поддержкой темного режима.

Предварительный просмотр

HTML-код

<div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

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

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

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

Открытый