Компонент видеоплеера
Адаптивный компонент видеоплеера, разработанный в стиле Neumorphism, с использованием Tailwind CSS. Он поддерживает темный режим с мягкими тенями для придания мягкого внешнего вида пользовательскому интерфейсу.
HTML-код
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
<div class="flex justify-center mb-4">
<video class="rounded-lg shadow-lg" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white font-medium">John Doe</p>
<p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
</div>
</div>
</div>Связанные компоненты
Компонент видеоплеера
Компонент видеоплеера в ретро/винтажном стиле с адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент видеоплеера
Адаптивный компонент видеоплеера, предназначенный для блога или потребления контента с микровзаимодействиями и пастельной цветовой гаммой. Он включает в себя функцию воспроизведения/паузы и регулятор громкости. В дизайне также предусмотрена поддержка темного режима.
Компонент видеоплеера
Видеоплеер в стиле Glassmorphism с полупрозрачными элементами, похожими на матовое стекло, пастельной цветовой гаммой и сложным интерфейсом, подходящим для бизнес/корпоративных сайтов. Он поддерживает адаптивный дизайн и темную тему с использованием Tailwind CSS, без JavaScript.