Composants Conteneur Composant de conteneur

Composant de conteneur

Un composant de conteneur de portefeuille skeuomorphe avec un thème sombre et un design réactif, présentant le travail et les produits avec des éléments interactifs.

Aperçu

HTML Code

<div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
    <h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
                <p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
        <div class="flex justify-center space-x-4">
            <a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
            </a>
        </div>
    </div>
</div>

Composants associés

Material Design Conteneur E-commerce

Composant de conteneur d’e-commerce réactif avec une grille de produits, un récapitulatif du panier d’achat et la prise en charge du thème sombre, conçu à l’aide des principes de conception matérielle et d’une palette de couleurs Earth Tones. Il comporte plusieurs éléments interactifs, notamment des fiches produits avec des images, des titres, des prix et des boutons « Ajouter au panier », ainsi qu’un récapitulatif du panier d’achat qui se met à jour avec les articles ajoutés. La mise en page s’adapte aux différentes tailles d’écran, et tous les éléments ont des styles de mode sombre définis avec les préfixes Tailwind CSS dark :.

Ouvrir

Neon_Glow_Healthcare_Container_Component

Un composant de conteneur complexe et réactif pour les applications de soins de santé avec une palette de couleurs néon/noir et blanc et un accent vibrant. Dispose de plusieurs éléments interactifs, de la prise en charge du mode sombre et du HTML sémantique.

Ouvrir

Composant de conteneur (tableau de bord, 'tableau de bord')

Composant de conteneur réactif avec prise en charge du thème sombre, conçu pour les tableaux de bord avec des micro-interactions et un jeu de couleurs analogue.

Ouvrir