Componenti Distintivi Distintivi di Neumorfismo

Distintivi di Neumorfismo

Questo è un componente Badge in stile Neumorfismo con una combinazione di colori pastello, progettato per un Portfolio e utilizzando Tailwind CSS.

Anteprima

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

Componente Badge Neumorfici

Una collezione di badge interattivi progettati in uno stile neumorfico morbido, adatti per applicazioni tecnologiche/SaaS. Presenta colori neutri freddi, supporto per la modalità oscura e reattività.

Aperto

Componente Badge

Componente Badge con supporto per temi scuri reattivi per l'e-commerce.

Aperto

3D_Badge_Component

Un componente badge semplice e reattivo ispirato al 3D per blog/contenuti, con colori ad alto contrasto e supporto per la modalità scura.

Aperto