Composants Composants multimédias Composants multimédias Composante 2

Composants multimédias Composante 2

Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.

Aperçu

HTML Code

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
    </div>
</div>

Composants associés

Glassmorphism Media Components Component

Composant multimédia Glassmorphism avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS

Ouvrir

Composants multimédias

Un composant de style Neumorphism pour l’affichage multimédia avec un design réactif et une prise en charge du thème sombre.

Ouvrir

Composant multimédia analogue au Bauhaus

Un composant multimédia réactif avec un design inspiré du Bauhaus, utilisant une palette de couleurs analogue, adapté aux sites Web gouvernementaux/de services publics. Caractéristiques des formes géométriques, des couleurs analogues primaires et la prise en charge du mode sombre.

Ouvrir