Videoplayer-Komponente
Eine reaktionsschnelle Videoplayer-Komponente, die mit Tailwind CSS gestaltet wurde und sich auf Mikrointeraktionen und die Unterstützung dunkler Themen konzentriert.
HTML-Code
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105 duration-200" role="video" aria-label="Video Player">
<div class="relative">
<img src="https://picsum.photos/800/450?random=1" alt="Video thumbnail" class="w-full h-48 object-cover">
<button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-3xl rounded-full opacity-0 transition-opacity duration-200 hover:opacity-100">
▶
</button>
</div>
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold dark:text-white">Video Title</h2>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of the video goes here. It should be engaging and concise.</p>
</div>
</div>Verwandte Komponenten
Art Deco Medizinischer Videoplayer
Eine einfache, reaktionsschnelle Videoplayer-Komponente mit Art-Déco-Graustufen-Ästhetik, die für Anwendungen im Gesundheitswesen/Medizin entwickelt wurde, einschließlich Unterstützung des Dunkelmodus.
Videoplayer-Komponente
Eine reaktionsschnelle Videoplayer-Komponente, die im Brutalismus-Stil mit Unterstützung für dunkle Themen gestaltet ist. Es zeichnet sich durch einen hohen Kontrast und ein fettes Layout aus, verwendet Tailwind CSS für das Styling und enthält Platzhalterbilder und Avatare.
Videoplayer-Komponente
Eine komplexe, reaktionsschnelle Videoplayer-Komponente für den E-Commerce mit triadischen Farben und einem auf Mikrointeraktion ausgerichteten Design. Enthält Wiedergabesteuerung, Lautstärke, Fortschrittsbalken, Vollbild, Einstellungen und ein Produkt-Overlay mit vollständiger Unterstützung des Dunkelmodus.