Компонент видеоплеера
Неоморфный компонент видеоплеера, предназначенный для демонстрации портфолио, с темной темой и адаптивным дизайном с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="bg-gray-300 dark:bg-gray-800 w-full md:w-3/4 rounded-xl overflow-hidden shadow-inner">
<video controls class="w-full h-auto">
<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="mt-4 text-center">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Showcase Title</h2>
<p class="text-gray-600 dark:text-gray-400">A short description of the video content goes here. Highlight your work effectively.</p>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-inner">
<div class="ml-3">
<span class="text-gray-800 dark:text-gray-200 font-semibold">User Name</span>
</div>
</div>
</div>Связанные компоненты
Компонент видеоплеера
Отзывчивый компонент видеоплеера, выполненный в стиле glassmorphism, с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия, поддержкой темных тем и изображениями-заполнителями.
Компонент видеоплеера
Адаптивный компонент видеоплеера, предназначенный для блога или потребления контента с микровзаимодействиями и пастельной цветовой гаммой. Он включает в себя функцию воспроизведения/паузы и регулятор громкости. В дизайне также предусмотрена поддержка темного режима.
Компонент видеоплеера
Отзывчивый компонент видеоплеера, выполненный в стиле брутализм с поддержкой темных тем. Он отличается высокой контрастностью и смелым макетом, использует Tailwind CSS для стилизации и включает в себя изображения-заполнители и аватары.