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
Un composant d’onglets minimaliste et dynamique pour le commerce électronique avec une complexité modérée, un design réactif et une prise en charge du thème sombre, mis en œuvre à l’aide de Tailwind CSS et HTML.
Composant Onglets de conception matérielle
Un composant d’onglets de style Material Design utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.
Composant Onglets
Un composant d’onglets réactifs conçu pour le mode sombre à l’aide de Tailwind CSS. Il comporte différents onglets sur lesquels les utilisateurs peuvent cliquer pour révéler du contenu, ainsi que des images et des avatars de remplacement.