Composant de mise en page 3D
Un composant de mise en page de conception 3D réactif avec des visuels attrayants, incorporant de la profondeur à travers les ombres et les couches. Il inclut la prise en charge du mode sombre et propose des images et des avatars aléatoires.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="max-w-4xl w-full p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">3D Layout Component</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image 1" class="w-full h-48 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card item. It's designed to entice the user.</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Random Image 2" class="w-full h-48 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card item. It's designed to entice the user.</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Featured Users</h3>
<div class="flex flex-wrap">
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-12 h-12 object-cover rounded-full">
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-12 h-12 object-cover rounded-full">
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-12 h-12 object-cover rounded-full">
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-12 h-12 object-cover rounded-full">
</div>
</div>
</div>
</div>
</div>Composants associés
Composants de mise en page
Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs 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.
Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.