Componente di impaginazione Glassmorphism
Un componente di impaginazione reattivo progettato con glassmorphism e una combinazione di colori triadica, adatto per la lettura di blog e contenuti. È dotato di più elementi interattivi e supporta la modalità oscura.
Codice HTML
<div class="flex justify-center mt-6">
<nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
<ul class="flex items-center space-x-2">
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
</li>
</ul>
</nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
</div>
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>Componenti correlati
Componente di impaginazione del neumorfismo
Un componente di impaginazione con design a neumorfismo, combinazione di colori pastello e complessità moderata. È progettato per i portfolio e include il design reattivo e il supporto per i temi scuri utilizzando solo HTML e Tailwind CSS.
Componente di impaginazione del neumorfismo
Componente di impaginazione del neumorfismo per l'e-commerce utilizzando Tailwind CSS
Componente di impaginazione
Componente di impaginazione reattiva con supporto per 3D, colore triadico, semplice, stile Business/Corporate e modalità scura