Componente lettore video
Un componente del lettore video neomorfico progettato per la presentazione del portfolio, caratterizzato da un tema scuro e un design reattivo utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="bg-gray-300 dark:bg-gray-800 w-full md:w-3/4 rounded-xl overflow-hidden shadow-inner">
<video controls class="w-full h-auto">
<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="mt-4 text-center">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Showcase Title</h2>
<p class="text-gray-600 dark:text-gray-400">A short description of the video content goes here. Highlight your work effectively.</p>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-inner">
<div class="ml-3">
<span class="text-gray-800 dark:text-gray-200 font-semibold">User Name</span>
</div>
</div>
</div>Componenti correlati
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.
Componente lettore video
Componente lettore video reattivo con design Glassmorphism, combinazione di colori dei toni della Terra e supporto per la modalità oscura. Utilizza HTML semplice e CSS Tailwind.
Lettore video minimalista
Componente Lettore video codificato in HTML con Tailwind CSS. Ha un design minimalista che utilizza una combinazione di colori in scala di grigi, destinata all'uso sul cruscotto. È un componente complesso con più elementi interattivi ed è completamente reattivo con il supporto della modalità oscura.