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
Playful_Documentation_Columns_Component
Un composant de documentation/colonnes wiki ludique et coloré avec des tons ensoleillés/chauds, des éléments arrondis et la prise en charge du mode sombre. Conçu pour être réactif sur tous les appareils.
Luxury_Dating_Columns_Component
Un composant de mise en page simple et élégant à trois colonnes pour les plateformes de rencontres/sociales, doté d’une esthétique luxueuse avec une palette de couleurs noires, blanches et d’accentuation, une réactivité totale et une prise en charge du mode sombre.