Neumorphisme des composants des colonnes
Neumorphisme des composants de colonnes - Un style d’interface utilisateur souple qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles. Ce composant est réactif et prend en charge le thème sombre. Aucun code JavaScript n’est nécessaire. Pour le mode sombre, la prise en charge CSS est suffisante.
HTML Code
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.dark .shadow-xl-dark {
box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>Composants associés
Colonnes Composant 49
Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.
Composant Colonnes
Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.
Composant Colonnes
Un composant de colonnes réactif conçu dans un style brutaliste avec des tons de terre, adapté au commerce électronique, avec une complexité moyenne et une prise en charge du thème sombre.