Corporate_Industrial_Footer_Ocean_Blue
Un componente piè di pagina reattivo, a tema aziendale e industriale con combinazione di colori oceano/blu, progettato per le aziende manifatturiere. Include collegamenti di navigazione, informazioni di contatto, social media e copyright, con supporto completo per la modalità scura.
Codice HTML
<footer class="bg-sky-700 text-white dark:bg-gray-950 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
<!-- Company Info / Logo -->
<div class="col-span-1 md:col-span-1">
<h3 class="text-2xl font-bold mb-4 text-sky-100 dark:text-sky-400">AeroFab Inc.</h3>
<p class="text-sky-100 dark:text-gray-400 text-sm leading-relaxed mb-4">
Leading the future of industrial manufacturing through innovation and precision engineering.
</p>
<p class="text-sky-100 dark:text-gray-400 text-sm">
Building tomorrow's industries, today.
</p>
</div>
<!-- Quick Links -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Our Solutions</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Industries Served</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Case Studies</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Careers</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Blog & News</a></li>
</ul>
</div>
<!-- Contact Info -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Contact Us</h4>
<div class="space-y-3 text-sky-100 dark:text-gray-400 text-sm">
<p>
123 Industrial Way<br>
Tech City, TX 75001<br>
USA
</p>
<p>
Email: <a href="mailto:[email protected]" class="hover:text-sky-300 transition duration-300">[email protected]</a>
</p>
<p>
Phone: <a href="tel:+1234567890" class="hover:text-sky-300 transition duration-300">+1 (234) 567-890</a>
</p>
<p>
Fax: +1 (234) 567-891
</p>
</div>
</div>
<!-- Newsletter & Social Media -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Stay Connected</h4>
<p class="text-sky-100 dark:text-gray-400 text-sm mb-4">Subscribe to our newsletter for the latest updates.</p>
<form class="flex flex-col sm:flex-row gap-2 mb-6">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-md bg-sky-800 border border-sky-600 text-white placeholder-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-200 dark:focus:ring-sky-500 text-sm">
<button type="submit" class="bg-sky-500 hover:bg-sky-600 text-white px-5 py-2 rounded-md font-semibold transition duration-300 dark:bg-sky-600 dark:hover:bg-sky-700 text-sm">
Subscribe
</button>
</form>
<div class="flex space-x-4">
<a href="#" aria-label="Facebook" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-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.797c0-2.506 1.492-3.89 3.777-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.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="Twitter" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-2.096.166-4.103-.687-5.556-2.18l-.51-.595s4.9-1.928 8-1.57c2.97.337 5.166-.821 5.927-2.36l1.378-2.757-.101-.01c-1.391-.144-2.738-2.09-.766-3.82L20.5 4.3 22 4.3c-.015 2.92-1.306 5.239-3.414 7.02l-1.025.856s-.66-.45-1.527-1.1c-1.284-.967-2.285-2.274-2.868-3.79l.523-1.05s-2.001 1.776-3.078 2.057l-1.12.28s-1.89-1.1-2.903-2.58l.191-.19s-2.92 5.09-2.92 5.09c.677.29 1.579-.9 2.042-1.3l.086.08s-.486 1.13.013 1.96c.49-.69.96-.92 1.341-1.09l.343-2.09s.893.3 1.258.46c.928-.27 1.597-.73 2.158-1.48l-.05.02c.005.006.012.012.019.019.566-.75.766-1.56 1-2.25l-.2-.14s-.2-.16-.3-.3l.04.14s-.5.06-1.05.2c-.44.2-.84.4-1.21.6-.33.1-.6.1-.7.1s-.4-.1-.7-.1c-1.87-1.34-3.1-3.69-3.7-6.22l-1.4 0H4s-.2 1.5.8 2.6c1.65 1.8 1.95 3.5 2.15 4.07l.08.19s-.01.07-.01.12l-.02.04s-.06.27-.06.49c-.06.2-.2.4-.2.4ZM3.109 20.211l-.813-.812c-.524-.523-.972-1.246-1.347-2.09-.38-.85-.689-1.802-.934-2.859-.245-1.057-.42-2.195-.526-3.399-.105-1.204-.158-2.457-.158-3.753 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057-.015-.018-.031-.035-.047-.05ZM5.2 7A1 1 0 014 7.2L3 13.9C2.7 15.6 3.6 17 5 17s2.3-1.4 2.3-3.1L7 7.2A117 117 0 005.2 7zM18.8 7a1 1 0 00-1.2.2L17 13.9c.3 1.7 1.2 3.1 2.6 3.1s2.3-1.4 2.3-3.1L21 7.2A117 117 0 0118.8 7z" />
</svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="YouTube" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.8 4.3c.09-1.07.72-1.93 1.7-2.3C21.8 1.9 23 2.1 24 2.6l-1 2.4c-.09.3-.12.6-.09 1c.09 1.07.72 1.93 1.7 2.3C23.6 8.5 24 7.6 24 6.8c0-.6-.3-.9-1-1.3-.8-.3-1.6-.2-2.3 0-.7.3-1.2.9-1.4 1.7-.2.7-.2 1.5-.1 2.3.1.8.4 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7c-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<!-- Divider -->
<hr class="my-8 border-sky-600 dark:border-gray-700">
<!-- Copyright / Bottom Text -->
<div class="text-center text-sky-100 dark:text-gray-400 text-sm">
© 2023 AeroFab Inc. All rights reserved. | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Privacy Policy</a> | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Terms of Service</a>
</div>
</div>
</footer>Componenti correlati
Piè di pagina del blog semplice analogo 3D
Componente piè di pagina reattivo con supporto per temi scuri utilizzando Tailwind CSS. Il piè di pagina ha un semplice design 3D con colori analoghi. È ottimizzato per blog/siti Web di contenuti.
Piè di pagina per prenotazioni aziendali
Un componente a piè di pagina aziendale complesso e reattivo progettato per i sistemi di prenotazione, con neutri caldi e supporto per la modalità scura, utilizzando HTML semantico e Tailwind CSS.
Componente piè di pagina
Un semplice componente a piè di pagina in modalità oscura per i social media con combinazione di colori complementari.