Componente lettore video
Un componente del lettore video progettato con vetromorfisma, caratterizzato da un effetto simile al vetro smerigliato con colori complementari. È interattivo e reattivo, adatto per il consumo di contenuti di blog con supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
<video class="w-full rounded-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 class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
<p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
</div>
<div class="flex items-center mt-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
</div>
</div>
</div>
</div>Componenti correlati
Componente lettore video
Un componente del lettore video reattivo con Tailwind CSS incentrato sulle microinterazioni e sul supporto del tema scuro.
VideoPlayer
Componente lettore video con stile Material Design, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente lettore video
Un componente del lettore video reattivo progettato con lo stile glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, supporto per temi scuri e immagini segnaposto.