Componente Schede Neumorfismo
Un componente a schede neumorfiche per le interfacce utente della dashboard, con una combinazione di colori in scala di grigi, un design reattivo e il supporto del tema scuro utilizzando solo HTML e Tailwind CSS.
Codice HTML
<div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
<div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
<div class="flex space-x-4 mb-6">
<button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
transition ease-in-out duration-300">
Overview
</button>
<button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium
bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
transition ease-in-out duration-300">
Analytics
</button>
<button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
transition ease-in-out duration-300">
Reports
</button>
</div>
<div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<!-- Content for the active tab -->
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
<p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
</div>
<!-- Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
<p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
</div>
<!-- Card 3 -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
<p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
}
</style>
</div>Componenti correlati
Componente Schede Skeuomorfe
Un componente di schede reattive con scheumorfismo, che utilizza Tailwind CSS per imitare gli elementi di design del mondo reale. Include il supporto per il tema scuro e le immagini segnaposto.
Componente Schede
Un componente Schede reattivo con un design scheumorfico, una combinazione di colori analoga e un supporto per temi scuri, adatto per siti Web aziendali professionali. Il componente utilizza Tailwind CSS per lo stile e non include JavaScript.
Componente Schede
Un componente di schede reattive progettato per la modalità oscura utilizzando Tailwind CSS. È dotato di diverse schede su cui gli utenti possono fare clic per rivelare i contenuti, insieme a immagini segnaposto e avatar.