Componente Colonne
Un componente Columns reattivo progettato con Glassmorphism, utilizzando una combinazione di colori triadica per un sito Web aziendale/aziendale. È dotato di elementi traslucidi simili al vetro smerigliato, effetti di sfocatura ed è adatto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente Colonne
Un componente di colonne reattive progettato per la presentazione del portfolio con supporto della modalità scura, utilizzando una combinazione di colori in scala di grigi e Tailwind CSS.
Componente Colonne
Un componente Colonne reattivo progettato per i blog o il consumo di contenuti. Presenta un design piatto minimalista con una combinazione di colori analoga e il supporto per il tema scuro.
Componente Colonne
Un componente Columns reattivo progettato in stile brutalista con toni della terra, su misura per l'e-commerce, con complessità media e supporto per temi scuri.