Componente del lettore video retrò
Un componente per lettore video interattivo progettato con un'estetica retrò/vintage, caratterizzato da una combinazione di colori in scala di grigi e molteplici elementi interattivi adatti per scopi di e-commerce, con supporto per la modalità oscura.
Codice HTML
<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<div class="relative video-wrapper">
<video controls class="w-full rounded-lg border border-gray-400" poster="https://picsum.photos/600/300?random=1">
<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 top-3 right-3 flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
<div class="text-gray-200">
<h3 class="text-lg font-bold">Video Title</h3>
<p class="text-sm">Uploaded by User Name</p>
</div>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between items-center">
<button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
<button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Buy Now</button>
</div>
<div class="mt-4">
<p class="text-gray-300 text-sm">Description: This retro video player component is perfect for showcasing video content within an e-commerce platform, evoking nostalgia with its vintage styles.</p>
</div>
</div>
</div>
Componenti correlati
Componente lettore video
Un componente del lettore video reattivo progettato con lo stile Neumorphism, utilizzando Tailwind CSS. È dotato di supporto per la modalità oscura con ombre sottili per dare un aspetto morbido all'interfaccia utente.
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.
Componente lettore video
Un componente del lettore video reattivo con Tailwind CSS incentrato sulle microinterazioni e sul supporto del tema scuro.