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
Composant Colonnes
Un composant de colonnes réactives conçu pour la présentation de portfolios avec prise en charge du mode sombre, à l’aide d’un jeu de couleurs en niveaux de gris et de Tailwind CSS.
Composant Colonnes
Colonnes en niveaux de gris réactives de style 3D pour une page de portfolio, avec prise en charge du mode sombre.
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.