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

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

Компонент Retro/Vintage Media Embed для бизнес/корпоративных сайтов с цветовой схемой Triadic и адаптивной поддержкой темной темы.

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

HTML-код

<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="relative" style="padding-bottom: 56.25%;">
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">Rad Video Title</h3>
        <span class="text-sm">5:32</span>
      </div>
      <p class="text-sm mb-4">
        Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis. 
      </p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
        <span class="text-sm font-semibold">Duke Silver</span>
      </div>
    </div>
  </div>
</div>

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

Компонент Media Embed

Компонент Media Embed, разработанный для электронной коммерции со стилем 3D-дизайна, дополнительной цветовой схемой и адаптивным макетом, поддерживающим темный режим.

Открытый

Компонент Media Embed

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

Открытый

Компонент Media Embed

Минималистичный и плоский дизайн встраиваемого компонента медиа с цветовой гаммой земляных тонов, подходящий для деловых/корпоративных сайтов. Это компонент средней сложности с адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS. JavaScript не включен.

Открытый