Lettore video
Componente lettore video con microinterazioni, combinazione di colori complementari, complessità moderata e design reattivo con supporto del tema scuro per l'uso del portfolio.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
<div class="relative">
<video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
<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 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
<button class="text-white text-4xl">
▶
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
</div>
</div>
</div>Componenti correlati
Componente lettore video
Componente lettore video con stile Glassmorphism, combinazione di colori analoga e complessità moderata per scopi di blog/contenuti, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Nessun Javascript.
VideoPlayer
Componente lettore video con stile Material Design, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente lettore video
Un lettore video in stile Glassmorphism con elementi traslucidi simili al vetro smerigliato, combinazione di colori pastello e un'interfaccia complessa adatta per siti Web aziendali/aziendali. Supporta il design reattivo e un tema scuro utilizzando Tailwind CSS, senza JavaScript.