Tailwind CSS Multi-Column Footer Code

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<!-- Main Content Spacer -->
<div class="min-h-screen flex flex-col">
  <div class="flex-grow flex items-center justify-center">
    <p class="text-gray-500 text-lg">Your page content goes here</p>
  </div>

  <!-- Footer -->
  <footer class="bg-gray-900 text-gray-300" x-data="{ year: new Date().getFullYear() }">
    <div class="max-w-7xl mx-auto px-6 py-12">
      <!-- Footer Columns -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
        <!-- Company Info -->
        <div>
          <h3 class="text-white text-lg font-semibold mb-4">Company</h3>
          <p class="text-sm mb-4">Building exceptional digital experiences for modern businesses.</p>
          <div class="flex space-x-4">
            <a href="#" class="hover:text-white transition-colors">
              <ion-icon name="logo-facebook" class="text-2xl"></ion-icon>
            </a>
            <a href="#" class="hover:text-white transition-colors">
              <ion-icon name="logo-twitter" class="text-2xl"></ion-icon>
            </a>
            <a href="#" class="hover:text-white transition-colors">
              <ion-icon name="logo-linkedin" class="text-2xl"></ion-icon>
            </a>
            <a href="#" class="hover:text-white transition-colors">
              <ion-icon name="logo-instagram" class="text-2xl"></ion-icon>
            </a>
          </div>
        </div>

        <!-- Products -->
        <div>
          <h3 class="text-white text-lg font-semibold mb-4">Products</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">Security</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Enterprise</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Roadmap</a></li>
          </ul>
        </div>

        <!-- Resources -->
        <div>
          <h3 class="text-white text-lg font-semibold mb-4">Resources</h3>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
            <li><a href="#" class="hover:text-white transition-colors">API Reference</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Guides</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Support</a></li>
          </ul>
        </div>

        <!-- Contact -->
        <div>
          <h3 class="text-white text-lg font-semibold mb-4">Contact</h3>
          <ul class="space-y-3 text-sm">
            <li class="flex items-start">
              <ion-icon name="location-outline" class="text-xl mr-2 mt-0.5"></ion-icon>
              <span>123 Business Street<br>City, State 12345</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="mail-outline" class="text-xl mr-2"></ion-icon>
              <a href="mailto:info@company.com" class="hover:text-white transition-colors">info@company.com</a>
            </li>
            <li class="flex items-center">
              <ion-icon name="call-outline" class="text-xl mr-2"></ion-icon>
              <a href="tel:+1234567890" class="hover:text-white transition-colors">+1 (234) 567-890</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Footer Bottom -->
      <div class="pt-8 border-t border-gray-800">
        <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <p class="text-sm">© <span x-text="year"></span> Company Name. All rights reserved.</p>
          <div class="flex space-x-6 text-sm">
            <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
            <a href="#" class="hover:text-white transition-colors">Terms of Service</a>
            <a href="#" class="hover:text-white transition-colors">Cookie Policy</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>