Footer Components

HTML previews use Alpine.js for tab switching only. Vue and React code matches exactly.

1) Minimal Footer

Simple footer with centered text and links.

<footer class="text-center py-6 border-t border-gray-200">
  <p class="text-gray-600 text-sm">&copy; 2025 Templateight. All rights reserved.</p>
  <div class="mt-2 flex justify-center gap-4 text-sm">
    <a href="#" class="text-gray-600 hover:text-violet">Privacy</a>
    <a href="#" class="text-gray-600 hover:text-violet">Terms</a>
    <a href="#" class="text-gray-600 hover:text-violet">Contact</a>
  </div>
</footer>
<template>
  <footer class="text-center py-6 border-t border-gray-200">
    <p class="text-gray-600 text-sm">&copy; 2025 Templateight. All rights reserved.</p>
    <div class="mt-2 flex justify-center gap-4 text-sm">
      <RouterLink to="/privacy" class="text-gray-600 hover:text-violet">Privacy</RouterLink>
      <RouterLink to="/terms" class="text-gray-600 hover:text-violet">Terms</RouterLink>
      <RouterLink to="/contact" class="text-gray-600 hover:text-violet">Contact</RouterLink>
    </div>
  </footer>
</template>
<script setup>
// purely presentational
</script>
import React from 'react'
export default function MinimalFooter(){
  return (
    <footer className="text-center py-6 border-t border-gray-200">
      <p className="text-gray-600 text-sm">&copy; 2025 Templateight. All rights reserved.</p>
      <div className="mt-2 flex justify-center gap-4 text-sm">
        <a href="/privacy" className="text-gray-600 hover:text-violet">Privacy</a>
        <a href="/terms" className="text-gray-600 hover:text-violet">Terms</a>
        <a href="/contact" className="text-gray-600 hover:text-violet">Contact</a>
      </div>
    </footer>
  )
}

2) 3-Column Footer

Company info, navigation links, and social icons.

<footer class="bg-gray-50 border-t border-gray-200 py-10">
  <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 px-4">
    <div>
      <h3 class="font-semibold text-gray-900 mb-3">Templateight</h3>
      <p class="text-sm text-gray-600">Modern Tailwind components and templates.</p>
    </div>
    <div>
      <h4 class="font-semibold text-gray-900 mb-3">Links</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet">About</a></li>
        <li><a href="#" class="hover:text-violet">Blog</a></li>
        <li><a href="#" class="hover:text-violet">Contact</a></li>
      </ul>
    </div>
    <div>
      <h4 class="font-semibold text-gray-900 mb-3">Follow Us</h4>
      <div class="flex gap-3 text-gray-600">
        <a href="#" class="hover:text-violet">Twitter</a>
        <a href="#" class="hover:text-violet">GitHub</a>
        <a href="#" class="hover:text-violet">Dribbble</a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-xs text-gray-500">&copy; 2025 Templateight</div>
</footer>
<template>
  <footer class="bg-gray-50 border-t border-gray-200 py-10">
    <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 px-4">
      <div>
        <h3 class="font-semibold text-gray-900 mb-3">Templateight</h3>
        <p class="text-sm text-gray-600">Modern Tailwind components and templates.</p>
      </div>
      <div>
        <h4 class="font-semibold text-gray-900 mb-3">Links</h4>
        <ul class="space-y-2 text-sm">
          <li><RouterLink to="/about" class="hover:text-violet">About</RouterLink></li>
          <li><RouterLink to="/blog" class="hover:text-violet">Blog</RouterLink></li>
          <li><RouterLink to="/contact" class="hover:text-violet">Contact</RouterLink></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold text-gray-900 mb-3">Follow Us</h4>
        <div class="flex gap-3 text-gray-600">
          <a href="#" class="hover:text-violet">Twitter</a>
          <a href="#" class="hover:text-violet">GitHub</a>
          <a href="#" class="hover:text-violet">Dribbble</a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-xs text-gray-500">&copy; 2025 Templateight</div>
  </footer>
</template>
import React from 'react'
export default function ThreeColFooter(){
  return (
    <footer className="bg-gray-50 border-t border-gray-200 py-10">
      <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 px-4">
        <div>
          <h3 className="font-semibold text-gray-900 mb-3">Templateight</h3>
          <p className="text-sm text-gray-600">Modern Tailwind components and templates.</p>
        </div>
        <div>
          <h4 className="font-semibold text-gray-900 mb-3">Links</h4>
          <ul className="space-y-2 text-sm">
            <li><a href="/about" className="hover:text-violet">About</a></li>
            <li><a href="/blog" className="hover:text-violet">Blog</a></li>
            <li><a href="/contact" className="hover:text-violet">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4 className="font-semibold text-gray-900 mb-3">Follow Us</h4>
          <div className="flex gap-3 text-gray-600">
            <a href="#" className="hover:text-violet">Twitter</a>
            <a href="#" className="hover:text-violet">GitHub</a>
            <a href="#" className="hover:text-violet">Dribbble</a>
          </div>
        </div>
      </div>
      <div className="mt-8 text-center text-xs text-gray-500">&copy; 2025 Templateight</div>
    </footer>
  )
}

3) Footer with Newsletter

Includes signup form, company links, and social buttons.

Templateight

Premium Tailwind templates and UI components.

Newsletter

Follow Us

Twitter GitHub LinkedIn
© 2025 Templateight. All rights reserved.
<footer class="bg-gray-900 text-white py-10">
  <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-8">
    <div>
      <h3 class="font-bold text-lg">Templateight</h3>
      <p class="text-gray-400 mt-2 text-sm">Premium Tailwind templates and UI components.</p>
    </div>
    <div>
      <h4 class="font-semibold mb-3">Newsletter</h4>
      <form class="flex gap-2">
        <input type="email" placeholder="Enter your email" class="flex-1 rounded px-3 py-2 text-gray-900" />
        <button type="submit" class="px-4 py-2 bg-violet rounded text-white font-semibold">Subscribe</button>
      </form>
    </div>
    <div>
      <h4 class="font-semibold mb-3">Follow Us</h4>
      <div class="flex gap-3">
        <a href="#" class="hover:text-violet">Twitter</a>
        <a href="#" class="hover:text-violet">GitHub</a>
        <a href="#" class="hover:text-violet">LinkedIn</a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-xs text-gray-400">&copy; 2025 Templateight. All rights reserved.</div>
</footer>
<template>
  <footer class="bg-gray-900 text-white py-10">
    <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-8">
      <div>
        <h3 class="font-bold text-lg">Templateight</h3>
        <p class="text-gray-400 mt-2 text-sm">Premium Tailwind templates and UI components.</p>
      </div>
      <div>
        <h4 class="font-semibold mb-3">Newsletter</h4>
        <form class="flex gap-2" @submit.prevent>
          <input type="email" placeholder="Enter your email" class="flex-1 rounded px-3 py-2 text-gray-900" />
          <button type="submit" class="px-4 py-2 bg-violet rounded text-white font-semibold">Subscribe</button>
        </form>
      </div>
      <div>
        <h4 class="font-semibold mb-3">Follow Us</h4>
        <div class="flex gap-3">
          <a href="#" class="hover:text-violet">Twitter</a>
          <a href="#" class="hover:text-violet">GitHub</a>
          <a href="#" class="hover:text-violet">LinkedIn</a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-xs text-gray-400">&copy; 2025 Templateight. All rights reserved.</div>
  </footer>
</template>
import React from 'react'
export default function NewsletterFooter(){
  return (
    <footer className="bg-gray-900 text-white py-10">
      <div className="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-8">
        <div>
          <h3 className="font-bold text-lg">Templateight</h3>
          <p className="text-gray-400 mt-2 text-sm">Premium Tailwind templates and UI components.</p>
        </div>
        <div>
          <h4 className="font-semibold mb-3">Newsletter</h4>
          <form className="flex gap-2" onSubmit={e => e.preventDefault()}>
            <input type="email" placeholder="Enter your email" className="flex-1 rounded px-3 py-2 text-gray-900" />
            <button type="submit" className="px-4 py-2 bg-violet rounded text-white font-semibold">Subscribe</button>
          </form>
        </div>
        <div>
          <h4 className="font-semibold mb-3">Follow Us</h4>
          <div className="flex gap-3">
            <a href="#" className="hover:text-violet">Twitter</a>
            <a href="#" className="hover:text-violet">GitHub</a>
            <a href="#" className="hover:text-violet">LinkedIn</a>
          </div>
        </div>
      </div>
      <div className="mt-8 text-center text-xs text-gray-400">&copy; 2025 Templateight. All rights reserved.</div>
    </footer>
  )
}

4) Modern Footer with Icons

Dark background, logo, inline navigation, and SVG-based social media icons.

Templateight

Crafting modern TailwindCSS templates & UI kits.

© 2025 Templateight. Built with ❤️ + TailwindCSS.
<footer class="bg-gray-900 text-gray-300">
  <div class="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row items-center md:justify-between gap-6">
    <div>
      <h3 class="text-xl font-bold text-white">Templateight</h3>
      <p class="text-sm text-gray-400">Crafting modern TailwindCSS templates & UI kits.</p>
    </div>
    <nav class="flex flex-wrap justify-center gap-6 text-sm font-medium">
      <a href="#" class="hover:text-white">About</a>
      <a href="#" class="hover:text-white">Blog</a>
      <a href="#" class="hover:text-white">Templates</a>
      <a href="#" class="hover:text-white">Contact</a>
    </nav>
    <div class="flex gap-4">
      <a href="#" aria-label="Twitter" class="hover:text-white">...svg...</a>
      <a href="#" aria-label="GitHub" class="hover:text-white">...svg...</a>
      <a href="#" aria-label="LinkedIn" class="hover:text-white">...svg...</a>
    </div>
  </div>
  <div class="border-t border-gray-700 mt-8 pt-6 text-center text-xs text-gray-500">&copy; 2025 Templateight. Built with ❤️ + TailwindCSS.</div>
</footer>
<template>
  <footer class="bg-gray-900 text-gray-300">
    <div class="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row items-center md:justify-between gap-6">
      <div>
        <h3 class="text-xl font-bold text-white">Templateight</h3>
        <p class="text-sm text-gray-400">Crafting modern TailwindCSS templates & UI kits.</p>
      </div>
      <nav class="flex flex-wrap justify-center gap-6 text-sm font-medium">
        <RouterLink to="/about" class="hover:text-white">About</RouterLink>
        <RouterLink to="/blog" class="hover:text-white">Blog</RouterLink>
        <RouterLink to="/templates" class="hover:text-white">Templates</RouterLink>
        <RouterLink to="/contact" class="hover:text-white">Contact</RouterLink>
      </nav>
      <div class="flex gap-4">
        <a href="#" aria-label="Twitter" class="hover:text-white">...svg...</a>
        <a href="#" aria-label="GitHub" class="hover:text-white">...svg...</a>
        <a href="#" aria-label="LinkedIn" class="hover:text-white">...svg...</a>
      </div>
    </div>
    <div class="border-t border-gray-700 mt-8 pt-6 text-center text-xs text-gray-500">&copy; 2025 Templateight. Built with ❤️ + TailwindCSS.</div>
  </footer>
</template>
import React from 'react'
export default function ModernFooter(){
  return (
    <footer className="bg-gray-900 text-gray-300">
      <div className="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row items-center md:justify-between gap-6">
        <div>
          <h3 className="text-xl font-bold text-white">Templateight</h3>
          <p className="text-sm text-gray-400">Crafting modern TailwindCSS templates & UI kits.</p>
        </div>
        <nav className="flex flex-wrap justify-center gap-6 text-sm font-medium">
          <a href="/about" className="hover:text-white">About</a>
          <a href="/blog" className="hover:text-white">Blog</a>
          <a href="/templates" className="hover:text-white">Templates</a>
          <a href="/contact" className="hover:text-white">Contact</a>
        </nav>
        <div className="flex gap-4">
          <a href="#" aria-label="Twitter" className="hover:text-white">...svg...</a>
          <a href="#" aria-label="GitHub" className="hover:text-white">...svg...</a>
          <a href="#" aria-label="LinkedIn" className="hover:text-white">...svg...</a>
        </div>
      </div>
      <div className="border-t border-gray-700 mt-8 pt-6 text-center text-xs text-gray-500">&copy; 2025 Templateight. Built with ❤️ + TailwindCSS.</div>
    </footer>
  )
}

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More