sectionfooter-darkbeginner

Dark Footer

A professional dark footer with multi-column links, logo, and copyright.

Preview

<footer class="bg-gray-900 text-gray-400 pt-16 pb-8 px-4">
  <div class="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
    <div>
      <h3 class="text-white font-bold mb-4">Product</h3>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors">Features</a></li><li><a href="#" class="hover:text-white transition-colors">Pricing</a></li><li><a href="#" class="hover:text-white transition-colors">Changelog</a></li></ul>
    </div>
    <div>
      <h3 class="text-white font-bold mb-4">Company</h3>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors">About</a></li><li><a href="#" class="hover:text-white transition-colors">Blog</a></li><li><a href="#" class="hover:text-white transition-colors">Careers</a></li></ul>
    </div>
    <div>
      <h3 class="text-white font-bold mb-4">Resources</h3>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors">Docs</a></li><li><a href="#" class="hover:text-white transition-colors">Guides</a></li><li><a href="#" class="hover:text-white transition-colors">Support</a></li></ul>
    </div>
    <div>
      <h3 class="text-white font-bold mb-4">Legal</h3>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors">Privacy</a></li><li><a href="#" class="hover:text-white transition-colors">Terms</a></li><li><a href="#" class="hover:text-white transition-colors">License</a></li></ul>
    </div>
  </div>
  <div class="max-w-6xl mx-auto border-t border-gray-800 pt-8 text-sm text-center">&copy; 2026 Acme Inc. All rights reserved.</div>
</footer>