Retro_Jewel_Tone_Dashboard_Footer_Navigation
Un componente di navigazione a piè di pagina reattivo per una dashboard, ispirato all'estetica retrò/vintage con colori gioiello (smeraldo, zaffiro, rubino) e supporto per la modalità scura. Include collegamenti di navigazione, icone dei social media e informazioni sul copyright.
Codice HTML
<footer class="bg-gradient-to-r from-emerald-700 to-sapphire-800 text-white py-12 px-6 sm:px-8 lg:px-12 dark:from-emerald-950 dark:to-slate-900 border-t-4 border-emerald-500 dark:border-ruby-600 font-mono">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10">
<div class="col-span-1">
<h3 class="text-2xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide uppercase">Retr<span class="text-emerald-300 dark:text-ruby-400">o</span>Dash</h3>
<p class="text-emerald-100 text-sm leading-relaxed mb-4">
Navigating the digital frontier with a nostalgic glance. Your trusted partner for insights from the past, presented for the future.
</p>
<div class="flex space-x-4">
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.109 22 16.51 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.31c9 0 13.92-7.55 13.92-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42 9 0 13.93-7.55 13.93-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42z" />
</svg>
</a>
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.863 8.163 6.84 9.504.498.09.678-.216.678-.47v-1.68c-2.775.605-3.363-1.34-3.363-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.006.07 1.532 1.026 1.532 1.026.892 1.53 2.34 1.085 2.91.83.09-.645.35-1.085.637-1.34-2.22-.253-4.555-1.11-4.555-4.912 0-1.087.388-1.974 1.029-2.672-.102-.253-.448-1.267.098-2.637 0 0 .84-.268 2.75 1.024A9.56 9.56 0 0112 6.844c.594 0 1.18.08 1.74.242 1.91-1.292 2.75-1.024 2.75-1.024.546 1.37.202 2.384.1 2.637.64.698 1.028 1.585 1.028 2.672 0 3.81-2.337 4.656-4.564 4.904.358.308.675.918.675 1.85V21c0 .254.18.56.678.47A9.995 9.995 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<nav class="col-span-1 md:col-span-2 lg:col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Quick Links</h3>
<ul class="space-y-4">
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Dashboard Home</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Data Overview</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Analytics Reports</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">User Settings</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Support & Help</a></li>
</ul>
</nav>
<div class="col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Resources</h3>
<ul class="space-y-4">
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Documentation</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">API Reference</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Blog & Articles</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Terms of Service</a></li>
</ul>
</div>
<div class="col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Contact Us</h3>
<address class="not-italic text-emerald-100 text-sm space-y-2">
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>123 Pixel Blvd, Data City, 90210</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" 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="M3 5a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4H5a2 2 0 01-2-2v-8z"></path></svg>[email protected]</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.592-1.555a2 2 0 012.288-.04l2.583 1.55A1 1 0 0121 11.69a2 2 0 01-2 2h-.096l-3.328 1.997a2 2 0 01-.734 3.323l-3.328 1.997a2 2 0 00-2.264 0l-3.328-1.997a2 2 0 01-.734-3.323L3.096 13.69A2 2 0 013 11.69V5z"></path></svg>+1 (555) RETRO-88</p>
</address>
</div>
</div>
<div class="border-t border-emerald-500/50 dark:border-ruby-700/50 pt-8 mt-10 text-center text-emerald-200 dark:text-slate-400 text-sm">
<p>© 2023 RetroDash. All rights reserved. <span class="hidden sm:inline">Embrace the past, power your future.</span></p>
</div>
</footer>Componenti correlati
Componente di navigazione del piè di pagina
Componente di navigazione a piè di pagina con modalità scura ed effetti reattivi
Componente di navigazione del piè di pagina
Componente di navigazione a piè di pagina per l'e-commerce con Material Design - un componente semplice con supporto per la modalità reattiva e scura, con una combinazione di colori complementare.
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo per dashboard con supporto per temi scuri, con microinterazioni sui passaggi del mouse sui collegamenti utilizzando colori triadici ed elementi complessi. Niente JavaScript, solo HTML con Tailwind CSS.