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.
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.
Glassmorphism Disposition du tableau de bord
Une disposition simple pour un tableau de bord avec des éléments translucides ressemblant à du verre givré, avec une palette de couleurs pastel et une prise en charge du mode sombre.
Composant Composants de mise en page
Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.