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

Компонент Media Embed

Адаптивный компонент Media Embed, стилизованный в скевоморфной манере, с использованием цветов тона Earth и подходящий для электронной коммерции, с поддержкой темных тем.

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

HTML-код

<div class="max-w-lg mx-auto p-4 bg-slate-200 dark:bg-slate-800 rounded-lg shadow-lg">
    <div class="relative overflow-hidden rounded-lg">
        <img class="w-full h-64 object-cover mb-4" src="https://picsum.photos/600/400" alt="Product Image">
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-full shadow">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a description of the product that mimics natural textures and colors, providing an earthy feel.</p>
    <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
        <button class="px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
    </div>
</div>

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

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

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

Открытый