Distintivi di Neumorfismo
Questo è un componente Badge in stile Neumorfismo con una combinazione di colori pastello, progettato per un Portfolio e utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
HTML
</span>
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
CSS
</span>
<span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
Tailwind CSS
</span>
nocode
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>Componenti correlati
Distintivi Skeuomorfi
Un set di badge con un design scheumorfico, una combinazione di colori complementari e un layout semplice, adatto per un blog o un sito di contenuti. Reattivo con supporto per la modalità oscura.
Componente Badge
Un componente di badge neumorfici con una combinazione di colori analoga per un sito Web di blog/contenuti. Presenta un design reattivo e il supporto per i temi scuri, utilizzando solo HTML e Tailwind CSS.
Componente Badge
Componente badge elegante e reattivo per la documentazione o i siti wiki, caratterizzato da una combinazione di colori dai toni della terra, una tipografia di lusso e il supporto completo della modalità scura.