Компонент видеоплеера
Компонент видеоплеера в стиле Brutalism с высокой контрастностью и необычной версткой, отличающийся адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
<div class="relative w-full max-w-2xl rounded-lg overflow-hidden shadow-lg">
<video class="w-full h-auto" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute inset-0 bg-black opacity-50"></div>
</div>
<div class="mt-4 text-center text-lg font-bold text-gray-800 dark:text-white">Bold Video Title</div>
<div class="mt-2 text-center text-gray-600 dark:text-gray-300">An engaging video description goes here.</div>
<div class="mt-4 flex items-center justify-center space-x-4">
<img src="https://picsum.photos/50/50" alt="User Avatar" class="rounded-full border-2 border-gray-800 dark:border-white">
<p class="text-sm font-semibold text-gray-800 dark:text-white">User Name</p>
</div>
<div class="mt-4 flex justify-between w-full max-w-md">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Like</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Dislike</button>
</div>
</div>Связанные компоненты
Видеоплеер
Компонент видеоплеера с микровзаимодействиями, дополнительной цветовой схемой, умеренной сложностью и адаптивным дизайном с поддержкой темной темы для использования в портфолио.
Компонент видеоплеера
Неоморфный компонент видеоплеера, предназначенный для демонстрации портфолио, с темной темой и адаптивным дизайном с использованием Tailwind CSS.