Glassmorphism Footer Navigation
Composant de navigation en pied de page avec style Glassmorphism, palette de couleurs vives et mise en page complexe à des fins de tableau de bord. Conception réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<footer class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-pink-500 text-white dark:bg-blue-500 dark:bg-opacity-20 dark:text-gray-200 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1">
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">About Us</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Careers</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Partnerships</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Press</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Features</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Pricing</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Integrations</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">API</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Blog</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Documentation</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Support</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Community</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Privacy Policy</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Terms of Service</a></li>
<li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-indigo-300 dark:border-indigo-700 pt-6 text-center text-sm">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</footer>Composants associés
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif avec un thème sombre, adapté à un site web de portfolio. Il présente une palette de couleurs monochromatique avec différentes nuances d’une seule couleur, une complexité moyenne avec quelques fonctionnalités interactives, et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre avec le préfixe dark :.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif conçu pour les sites Web d’entreprise/d’entreprise en mode sombre, doté d’une palette de couleurs triadique et d’une complexité moyenne avec des fonctionnalités interactives.
Composant de navigation en pied de page
Un composant de navigation en pied de page réactif avec un style de design rétro/vintage, utilisant des couleurs vives et adapté aux interfaces de médias sociaux.