OrganicTabsComponent
Un composant d’onglets simple et réactif avec un design organique inspiré de la nature et une palette de couleurs bleu d’entreprise, adapté aux plateformes musicales/audio. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 md:p-8 dark:bg-gray-900 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-800 dark:to-gray-950 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<!-- Tabs Container -->
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden">
<!-- Tabs Navigation -->
<div class="flex border-b border-blue-200 dark:border-gray-700 bg-gradient-to-r from-blue-500 to-blue-600 dark:from-gray-700 dark:to-gray-800 p-1 md:p-2 rounded-t-3xl">
<button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-semibold text-white focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 mr-1 md:mr-2 shadow-inner hover:bg-blue-700 dark:hover:bg-gray-900 bg-blue-600 dark:bg-gray-800 dark:text-white transform scale-105">
Now Playing
</button>
<button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-medium text-blue-100 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 hover:bg-blue-500 dark:hover:bg-gray-750 hover:text-white">
Queue
</button>
<button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-medium text-blue-100 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 ml-1 md:ml-2 hover:bg-blue-500 dark:hover:bg-gray-750 hover:text-white">
More Tracks
</button>
</div>
<!-- Tabs Content -->
<div class="p-4 md:p-8 bg-white dark:bg-gray-850">
<!-- Content for 'Now Playing' Tab -->
<div>
<h2 class="text-2xl md:text-3xl font-bold mb-4 dark:text-blue-300 text-blue-700">Currently Listening</h2>
<div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6">
<div class="relative w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden shadow-lg border-4 border-blue-300 dark:border-gray-700 flex-shrink-0">
<img src="https://picsum.photos/id/1040/400/400" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105 filter saturate-125 dark:saturate-100">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-full flex items-end justify-center p-4">
<button class="text-white bg-blue-600 dark:bg-gray-700 rounded-full p-3 shadow-lg hover:bg-blue-700 dark:hover:bg-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<div class="text-center md:text-left">
<p class="text-blue-500 dark:text-blue-400 text-lg font-semibold mb-1">Artist Name</p>
<h3 class="text-3xl md:text-4xl font-extrabold leading-tight mb-2 dark:text-white text-gray-900">Song Title Goes Here</h3>
<p class="text-gray-600 dark:text-gray-400 text-md md:text-lg">Album Name - Year</p>
<div class="mt-4 flex items-center justify-center md:justify-start space-x-4">
<button class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-full p-2">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.707 10.293a1 1 0 010-1.414L3.586 5.5a1 1 0 011.414 0l.707.707a1 1 0 010 1.414L3.414 9H15a1 1 0 010 2H3.414l2.293 2.293a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0L.707 10.293z" clip-rule="evenodd"></path></svg>
</button>
<button class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-full p-2">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.293 9.707a1 1 0 010 1.414L13.414 14.5a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414L16.586 11H5a1 1 0 010-2h11.586l-2.293-2.293a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l2.828 2.828z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Onglets d’actualités Art Déco
Il s’agit d’un composant d’onglets complexe, réactif et luxueux de style « Art déco » conçu pour les sites d’actualités et de journalisme, avec des motifs géométriques, des couleurs analogues riches et la prise en charge du mode sombre. Il fournit plusieurs éléments interactifs pour la navigation dans le contenu.
Composant Onglets
Composant Responsive Tabs avec tons de terre et micro-interactions pour les sites Web d’entreprise, prenant en charge le mode sombre à l’aide de Tailwind CSS. Utilise uniquement les classes HTML et Tailwind.
Composant Onglets de conception matérielle
Il s’agit d’un composant d’onglets complexe et monochrome inspiré du Material Design pour les tableaux de bord, avec un design réactif, une prise en charge du mode sombre et des éléments interactifs. Utilise des mises en page basées sur une grille et des effets d’ombre subtils.