Видеоплеер
Компонент видеоплеера со стилем Material Design, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800">
<div class="relative">
<img class="w-full" src="https://picsum.photos/600/400" alt="Video thumbnail">
<div class="absolute inset-0 flex items-center justify-center">
<button class="text-white text-6xl">
▶
</button>
</div>
</div>
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Video Title</div>
<p class="text-gray-700 dark:text-gray-300 text-base">
Video description goes here.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag1</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag2</span>
</div>
</div>Связанные компоненты
Компонент видеоплеера
Сложный, высококонтрастный компонент видеоплеера с эстетикой Material Design, подходящий для веб-сайтов о путешествиях и туризме. Отличается адаптивным дизайном, поддержкой темного режима и интерактивными элементами.
Компонент видеоплеера
Адаптивный компонент видеоплеера, стилизованный под Tailwind CSS, ориентирован на микровзаимодействия и поддержку темных тем.
Brutalist_RealEstate_VideoPlayer
Сложный компонент видеоплеера в брутальном стиле для объявлений о недвижимости, отличающийся высокой контрастностью, цветовой палитрой леса и зеленым цветом и адаптивным дизайном с поддержкой темного режима. Содержит сведения об объекте недвижимости, информацию об агенте и кнопки действий.