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
Composant Triadic 3D Business Layout
Il s’agit d’un composant de mise en page de complexité modérée pour les sites Web d’entreprise, avec une palette de couleurs triadique et des éléments de conception 3D pour plus de profondeur, avec une réactivité totale et une prise en charge du mode sombre.
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.
Composant de mise en page de blog minimaliste
Composant de mise en page de blog minimaliste avec schéma de couleurs monochromatiques pour la consommation de contenu, réactif et avec prise en charge du thème sombre.