Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-gradient-to-br from-purple-100 to-indigo-100 min-h-screen p-4 dark:from-gray-900 dark:to-black md:p-8">
<!-- Component Wrapper -->
<div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden dark:bg-zinc-800 transform transition-all duration-500 hover:scale-[1.005] hover:shadow-3xl border-t-4 border-l-4 border-purple-600 dark:border-purple-800">
<!-- Header Section -->
<div class="relative p-6 md:p-10 bg-purple-800 text-white dark:bg-purple-950 overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-700 before:to-fuchsia-600 before:opacity-30 dark:before:from-purple-900 dark:before:to-fuchsia-900 before:blur-sm">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg font-serif mb-4 md:mb-0">
<span class="block">Documentation</span>
<span class="block text-purple-200 text-2xl md:text-3xl lg:text-4xl mt-2 font-light">Art Deco Archives</span>
</h1>
<div class="flex space-x-4">
<button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
New Page
</button>
<button class="px-6 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2400/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
Search
</button>
</div>
</div>
<!-- Art Deco Pattern Overlay -->
<div class="absolute inset-0 bg-repeat bg-center opacity-10" style="background-image: url('data:image/svg+xmlComposants associés
Composante fonctionnelle des soins de santé
Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.
Composant fonctionnel du blog
Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.
Commandes du lecteur de musique Glassmorphic
Un composant de contrôle de lecteur de musique glassmorphic avec des tons sépia/brun, avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il est réactif, prend en charge le mode sombre et convient au streaming musical et aux plateformes audio.