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.
HTML Code
<div class="flex flex-col lg:flex-row justify-between p-6 bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-lg shadow-lg space-y-6 lg:space-y-0 lg:space-x-6">
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any information relevant to your business.</p>
<img src="https://picsum.photos/200/150?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 2</h2>
<p class="text-gray-600 dark:text-gray-400">Description for the second column goes here. You can elaborate on services or features.</p>
<img src="https://picsum.photos/200/150?random=2" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 3</h2>
<p class="text-gray-600 dark:text-gray-400">Details for the third column. Include any additional content as needed.</p>
<img src="https://picsum.photos/200/150?random=3" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
</div>Composants associés
Composant Colonnes
Un composant de colonnes réactives avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Colonnes
Un composant de colonnes minimaliste avec une palette de couleurs en niveaux de gris conçu pour les interfaces de réseaux sociaux. Il dispose d’une mise en page réactive avec prise en charge du thème sombre.