Video Player Component
A responsive video player component designed with Neumorphism style, using Tailwind CSS. It features support for dark mode with subtle shadows to give a soft UI appearance.
HTML Code
<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>Related Components
Video Player Component
A video player component designed with glassmorphism, featuring a frosted glass-like effect with complementary colors. It is interactive and responsive, suitable for blog content consumption with dark theme support.
Video Player Component
Video Player Component with Glassmorphism style, Analogous color scheme, and Moderate complexity for Blog/Content purpose, with responsive design and dark theme support using Tailwind CSS. No Javascript.
Video Player Component
A responsive video player component designed in a brutalism style with dark theme support. It features high contrast and a bold layout, utilizing Tailwind CSS for styling and includes placeholder images and avatars.