Composant Onglets Neumorphisme
Composant d’onglets neumorphiques pour les interfaces utilisateur des tableaux de bord, doté d’un jeu de couleurs en niveaux de gris, d’un design réactif et d’une prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.
HTML Code
<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>Composants associés
Composant Onglets
Un composant Tabs réactif avec un style Material Design, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu avec Tailwind CSS pour les sites Web à fort contenu.
Composant Onglets - Emploi/Carrière
Un composant d’onglets réactifs avec une esthétique Material Design et une palette de couleurs pastel, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.
Onglets de conception matérielle
Composant Tabs avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS, sans JavaScript.