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.
Codice HTML
<nav aria-label="Pagination" class="flex items-center justify-center mt-8">
<ul class="flex rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark">
<li>
<a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-pastel-light rounded-l-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">
<span class="sr-only">Previous</span>
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">1</a>
</li>
<li>
<a href="#" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 bg-pastel-medium hover:bg-pastel-dark hover:text-blue-700 dark:bg-pastel-darker dark:text-white">
2
</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">3</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light rounded-r-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">
<span class="sr-only">Next</span>
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10L7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</nav>
<style>
/* Add your custom Neumorphism shadow styles here */
.shadow-neumorphic-light {
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f2f2;
}
.shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
}
/* Define your pastel color palette */
.bg-pastel-light {
background-color: #e0e0e0;
}
.bg-pastel-medium {
background-color: #d5d5d5;
}
.bg-pastel-dark {
background-color: #cccccc;
}
.bg-pastel-darker {
background-color: #b0b0b0;
}
</style>Componenti correlati
Componente di impaginazione
Componente di impaginazione con stile di design retrò / vintage, combinazione di colori triadica, complessità semplice, per blog / contenuto, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.
Componente di impaginazione
Un componente di impaginazione reattivo e monocromatico ispirato al 3D per le interfacce dei social media, con supporto per la modalità scura, realizzato con Tailwind CSS.
Componente di impaginazione
Un componente di impaginazione reattivo progettato con uno stile brutalista, utilizzando toni della terra e complessità moderata per un sito Web aziendale/aziendale, con supporto per temi scuri.