Pie de página de reservas corporativas
Un componente de pie de página corporativo complejo y responsivo diseñado para sistemas de reservas, con neutros cálidos y soporte para modo oscuro, utilizando HTML semántico y Tailwind CSS.
Código HTML
<footer class="bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- Company Info / Logo -->
<div class="flex flex-col items-start">
<a href="#" class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
<span class="text-amber-600 dark:text-amber-400">Book</span>Corp
</a>
<p class="text-sm mb-4 leading-relaxed max-w-xs">Your trusted partner for seamless bookings and reservations. Excellence in every appointment.</p>
<div class="flex space-x-4">
<a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
<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.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-.03.01-.06-.02-.09-.036l-2.126-1.643-.092-.073-.016.035c-.443.916-1.077 1.636-1.897 2.164a7.994 7.994 0 01-.845.41c-.24.088-.476.162-.714.22h-.032c-.08-.009-.16-.017-.238-.024l-.168-.005a.75.75 0 01-.132-.016 10.022 10.022 0 01-1.74-1.218c-.894-.78-1.558-1.765-1.92-2.883-.178-.54-.287-1.11-.32-1.696-.016-.277-.023-.556-.023-.836 0-3.328 2.672-6 6-6h2v-2h-3C6.672 5 4 7.672 4 10.999c0 .28.007.559.023.836.033.586.142 1.156.32 1.696.363 1.117 1.027 2.102 1.92 2.883 1.01 1.008 2.247 1.624 3.6 1.838.08.012.16.026.24.037.03.004.06.006.09.006v.05zM22 12c0-3.328-2.672-6-6-6h-2v2h3c2.203 0 4 1.797 4 4 0 .28-.007.559-.023.836-.033.586-.142 1.156-.32 1.696-.363 1.117-1.027 2.102-1.92 2.883-1.01 1.008-2.247 1.624-3.6 1.838-.08.012-.16.026-.24.037-.03.004-.06.006-.09.006v.05z" fill="currentColor" />
<path d="M12 9a3 3 0 100 6 3 3 0 000-6z" fill="currentColor" />
<path d="M12 11a1 1 110-2 1 1 0 000 2z" fill="currentColor" />
<circle cx="12" cy="12" r="3" opacity="0" />
</svg>
<span class="sr-only">Instagram</span>
</a>
<a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.057 1.7L.023 1.644l.01-.01c.148-.12.296-.24.444-.36l.01-.008L.5.5C.42-.5.5-.5.42-.5.42-.5.25.5-.5.5c-.75 0 1.25-.5 1.25-.5.2-.2.2-.2-.2-.2C1.72.1-.22-.2-.22-.2.02-.2-.22-.2.2-.2Z" fill="none"/>
<path d="M19.5 0h-15C2.239 0 0 2.239 0 4.999v14.002C0 21.761 2.239 24 4.5 24h15c2.761 0 5-2.239 5-4.999V4.999C24 2.239 21.761 0 19.5 0zm-4.053 2.164c.731.066 1.34.195 1.776.326.438.132.898.396 1.35.792.45.396.792.898 1.032 1.488.24.59.396 1.296.486 2.088.09.792.108 1.692.054 2.652-.054.96-.216 1.956-.486 2.94-.27.984-.666 1.836-1.188 2.556-.522.72-1.188 1.278-1.998 1.68-.81.402-1.692.684-2.61.846-1.22.216-2.592.29-4.104.22-.648-.027-1.314-.09-2.022-.189-.708-.099-1.395-.234-2.034-.396-.639-.162-1.224-.396-1.728-.693-.504-.297-.936-.666-1.296-1.107-.36-.441-.6-1-.72-1.68-.12-.68-.198-1.476-.234-2.388-.036-.912-.009-1.872.081-2.88.09-.96.252-1.896.486-2.796.234-.9.567-1.71.999-2.43.432-.72 1.008-1.278 1.728-1.68.72-.402 1.548-.684 2.484-.846 1.08-.18 2.304-.252 3.672-.216.702.018 1.413.081 2.115.195.702.114 1.377.261 2.016.486zm-.05-.008z" fill="currentColor"/>
</svg>
<span class="sr-only">LinkedIn</span>
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
<nav class="flex flex-col space-y-3">
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About Us</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Services</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Pricing</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">FAQ</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Blog</a>
</nav>
</div>
<!-- Resources -->
<div>
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
<nav class="flex flex-col space-y-3">
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Support Center</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Developer API</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Terms of Service</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Privacy Policy</a>
<a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Cookie Policy</a>
</nav>
</div>
<!-- Contact Info / Newsletter -->
<div>
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Get in Touch</h3>
<address class="not-italic text-sm space-y-2 mb-6">
<p>123 Booking Ave, Suite 400</p>
<p>Business City, BC 90210</p>
<p class="mt-2"><a href="tel:+1234567890" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">+1 (234) 567-890</a></p>
<p><a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">[email protected]</a></p>
</address>
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Newsletter</h3>
<form class="flex flex-col sm:flex-row gap-2">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required
class="w-full flex-auto rounded-md border border-stone-300 dark:border-stone-700 bg-white/50 dark:bg-stone-800 px-3.5 py-2 text-stone-800 dark:text-stone-200 shadow-sm placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400 sm:text-sm sm:leading-6"
placeholder="Enter your email">
<button type="submit"
class="flex-none rounded-md bg-amber-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">
Subscribe
</button>
</form>
</div>
</div>
<div class="border-t border-stone-300 dark:border-stone-700 pt-8 mt-8 text-center text-sm">
<p>© <span id="current-year"></span> BookCorp. All rights reserved.</p>
</div>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</footer>Componentes relacionados
Componente de pie de página de redes sociales
Un componente de pie de página responsivo para interfaces de redes sociales, diseñado con los principios de Material Design utilizando un esquema de color azul monocromático. Cuenta con diseños basados en cuadrículas, efectos de profundidad (sombras), animaciones de desplazamiento y transición para elementos interactivos, un formulario de suscripción al boletín, íconos sociales, avatares de usuario y soporte para el modo oscuro a través del modificador dark: de Tailwind.
Componente de pie de página skeuomórfico
Componente de pie de página responsivo con diseño esqueuomórfico, esquema de color análogo (verdes, azul-verdes) y complejidad moderada adecuado para sitios web comerciales. Incluye enlaces, un marcador de posición de logotipo y un sutil efecto Skeuomorphic logrado con sombras y degradados. Soporta modos claro y oscuro.
Componente de pie de página de neumorfismo
Componente de pie de página de neumorfismo responsivo con soporte de tema oscuro