3D-monochromatischer Videoplayer
Eine reaktionsschnelle Videoplayer-Komponente mit 3D-Designelementen und monochromatischem Farbschema, die sich für ein Dashboard eignet.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4"> <div class="relative w-full max-w-2xl rounded-lg shadow-xl overflow-hidden dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-500 hover:scale-105"> <div class="aspect-w-16 aspect-h-9"> <video controls class="w-full h-full object-cover"> <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="p-6"> <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-3">Video Title</h3> <p class="text-gray-600 dark:text-gray-300">A brief description of the video content goes here. This is a sample video demonstrating the video player component with a 3D-like feel and monochromatic colors.</p> </div> <div class="absolute inset-0 pointer-events-none"> <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-transparent to-gray-300 opacity-20 dark:from-gray-700 dark:to-gray-800 rounded-lg"></div> </div> </div></div>
Verwandte Komponenten
Videoplayer-Komponente
Eine Videoplayer-Komponente im Retro-/Vintage-Stil mit responsivem Design und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.
Videoplayer-Komponente
Eine minimalistische Videoplayer-Komponente, die für Social-Media-Schnittstellen entwickelt wurde und ein responsives Layout mit Unterstützung für dunkle Themen bietet.
Videoplayer-Komponente
Responsive Videoplayer-Komponente mit Glassmorphism-Design, Farbschema für Erdtöne und Unterstützung für den Dunkelmodus. Verwendet einfaches HTML und Tailwind CSS.