Composant Colonnes
Un composant de colonnes de style Material Design avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Column 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
</div>
<!-- Column 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
</div>
<!-- Column 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
</div>
</div>
</div>
Composants associés
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.
Composant Colonnes
Un composant de colonnes réactives conçu avec Glassmorphism, en utilisant un schéma de couleurs triadique pour un site Web d’entreprise. Il présente des éléments translucides givrés ressemblant à du verre givré, des effets de flou et convient au mode sombre.
Composant de colonnes de fabrication d’entreprise/professionnel
Un composant de colonnes complexe et réactif conçu pour les entreprises manufacturières/industrielles avec une esthétique d’entreprise/professionnelle et une palette de couleurs automnale. Inclut la prise en charge du mode sombre et du HTML sémantique.