Composants Composants de mise en page Composant Composants de mise en page

Composant Composants de mise en page

Un composant de mise en page conçu dans un style skeuomorphe qui imite ses homologues du monde réel, avec des éléments réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
    <header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
        <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">
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
    </main>
    <footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
        <p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
    </footer>
</div>

Composants associés

Composant Composants de mise en page

Un composant Web réactif conçu avec un style skeuomorphe, avec une palette de couleurs monochromatiques pour les sites Web d’entreprise. Comprend des éléments interactifs pour une interface riche et prend en charge le mode sombre.

Ouvrir

Retro_Jewel_Tone_Entertainment_Layout

Un composant de mise en page d’inspiration rétro/vintage de complexité modérée pour les plates-formes de divertissement, avec des tons de bijoux riches et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir

Composant Composants de mise en page

Un composant de mise en page de tableau de bord réactif avec le style Glassmorphism, une palette de couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comporte une barre latérale et une zone de contenu principale avec des éléments translucides givrés ressemblant à du verre et des effets de flou.

Ouvrir