Minimalist iOS 26 Foote

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Footer

Author Omer fils ELENGA

Tailwind v3.4 524 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Minimalist iOS 26 Footer</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r158/three.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro Display', 'Inter', 'sans-serif']
          },
          animation: {
            'gradient-shift': 'gradientShift 15s ease infinite',
            'float': 'float 6s ease-in-out infinite'
          },
          keyframes: {
            gradientShift: {
              '0%, 100%': { backgroundPosition: '0% 50%' },
              '50%': { backgroundPosition: '100% 50%' }
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-8px)' }
            }
          }
        }
      }
    }
  </script>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      background: #000;
      color: white;
    }

/* Fond dégradé animé */
    .footer-gradient {
       background-size: 300% 300%;
      animation: gradient-shift 15s ease infinite;
      position: relative;
      overflow: hidden;
    }

/* Three.js canvas */
    .three-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

/* Particules interactives */
    .interactive-particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

/* Carte glassmorphism */
    .glass-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

.glass-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

/* Bouton iOS */
    .ios-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 8px 20px;
      font-size: 15px;
      font-weight: 500;
      color: white;
      transition: all 0.2s ease;
    }

.ios-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.03);
    }

/* Icônes */
    .social-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

.social-icon:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

/* Animation flottante */
    .float-animation {
      animation: float 6s ease-in-out infinite;
    }

/* Jeu interactif - particules qui suivent la souris */
    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
      opacity: 0.8;
      pointer-events: none;
      transition: transform 0.2s ease, opacity 0.3s ease;
    }

/* Responsive */
    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr !important;
      }
      .footer-bottom {
        flex-direction: column !important;
        gap: 1rem;
        text-align: center;
      }
      .social-links {
        justify-content: center !important;
      }
    }
  </style>
</head>
<body class="bg-black text-white">

<footer class="footer-gradient relative pt-16 pb-12">
    
    <canvas id="footer-canvas" class="three-canvas"></canvas>
    
    
    <div id="interactive-particles" class="interactive-particles"></div>

<div class="container mx-auto px-4 relative z-10">
      <div class="footer-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        
        <div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0s">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center backdrop-blur-sm">
              <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">O</span>
            </div>
            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">OmerLinks</span>
          </div>
          <p class="text-gray-300 leading-relaxed">
            Création de solutions innovantes pour un monde numérique en constante évolution.
          </p>
          <div class="social-links flex gap-3">
            <a href="#" class="social-icon hover:bg-blue-500/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="social-icon hover:bg-sky-500/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.32-3.809 2.105-6.112 2.105-.398 0-.79-.023-1.175-.067 2.189 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="social-icon hover:bg-pink-500/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="social-icon hover:bg-blue-600/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <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>
          </div>
        </div>

<div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0.2s">
          <h3 class="text-lg font-semibold text-white">Quick Links</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Home
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> About Us
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Services
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Pricing
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Blog
            </a></li>
          </ul>
        </div>

<div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0.4s">
          <h3 class="text-lg font-semibold text-white">Services</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Web Development
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Mobile Apps
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> UI/UX Design
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Digital Marketing
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Cloud Solutions
            </a></li>
          </ul>
        </div>

<div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0.6s">
          <h3 class="text-lg font-semibold text-white">Contact Us</h3>
          <address class="not-italic text-gray-300 space-y-2">
            <p class="flex items-start gap-3">
              <svg class="w-5 h-5 text-purple-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <span>123 brazzaville, Congo</span>
            </p>
            <p class="flex items-start gap-3">
              <svg class="w-5 h-5 text-purple-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <span class="hover:text-white transition">
                <a href="mailto:elengaomerfils00@gmail.com" class="hover:underline">my mail</a>
              </span>
            </p>
            <p class="flex items-start gap-3">
              <svg class="w-5 h-5 text-purple-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              <span class="hover:text-white transition">
                <a href="tel:+242050332252" class="hover:underline">+242 05 033 2252 </a>
              </span>
            </p>
          </address>
        </div>
      </div>

<div class="footer-bottom flex flex-col md:flex-row justify-between items-center pt-6 border-t border-white/10">
        <p class="text-gray-400 text-sm">
          © <span id="year"></span> OmerLinks. All rights reserved.
        </p>
        <div class="flex flex-wrap justify-center gap-4 mt-4 md:mt-0">
          <a href="#" class="text-gray-400 hover:text-white text-sm transition flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Privacy Policy
          </a>
          <a href="#" class="text-gray-400 hover:text-white text-sm transition flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Terms of Service
          </a>
          <a href="#" class="text-gray-400 hover:text-white text-sm transition flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Cookies
          </a>
        </div>
      </div>
    </div>
  </footer>

// Initialiser Three.js pour le fond
    function initThreeJS() {
      const canvas = document.getElementById('footer-canvas');
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer({ 
        canvas: canvas,
        alpha: true,
        antialias: true
      });
      
      renderer.setSize(window.innerWidth, 300);
      renderer.setPixelRatio(window.devicePixelRatio);
      
      // Créer des particules
      const particlesGeometry = new THREE.BufferGeometry();
      const particlesCount = 500;
      
      const posArray = new Float32Array(particlesCount * 3);
      for (let i = 0; i < particlesCount * 3; i++) {
        posArray[i] = (Math.random() - 0.5) * 10;
      }
      
      particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
      
      const particlesMaterial = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 0.02,
        transparent: true,
        opacity: 0.8,
        sizeAttenuation: true
      });
      
      const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
      scene.add(particlesMesh);
      
      camera.position.z = 3;
      
      // Animation
      function animate() {
        requestAnimationFrame(animate);
        
        particlesMesh.rotation.x += 0.0002;
        particlesMesh.rotation.y += 0.0005;
        
        renderer.render(scene, camera);
      }
      
      // Gestion du resize
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / 300;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, 300);
      });
      
      animate();
    }

// Particules interactives (jeu)
    function initInteractiveParticles() {
      const container = document.getElementById('interactive-particles');
      const particleCount = 20;
      const particles = [];
      
      // Créer les particules
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        particle.style.backgroundColor = `hsl(${Math.random() * 60 + 270}, 70%, 60%)`;
        container.appendChild(particle);
        particles.push(particle);
      }
      
      // Suivre la souris
      let mouseX = 0, mouseY = 0;
      
      document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
        
        particles.forEach((particle, index) => {
          const rect = particle.getBoundingClientRect();
          const particleX = rect.left + rect.width / 2;
          const particleY = rect.top + rect.height / 2;
          
          const dx = mouseX - particleX;
          const dy = mouseY - particleY;
          const distance = Math.sqrt(dx * dx + dy * dy);
          
          if (distance < 150) {
            const angle = Math.atan2(dy, dx);
            const force = (150 - distance) / 150;
            
            particle.style.transform = `
              translate(${Math.cos(angle) * force * 20}px, ${Math.sin(angle) * force * 20}px)
              scale(${1 + force * 0.5})
            `;
            particle.style.opacity = 0.3 + force * 0.7;
          } else {
            particle.style.transform = 'translate(0, 0) scale(1)';
            particle.style.opacity = 0.8;
          }
        });
      });
      
      // Effet de flottaison constant
      function floatParticles() {
        particles.forEach((particle, index) => {
          const baseX = parseFloat(particle.style.left);
          const baseY = parseFloat(particle.style.top);
          
          const offsetX = Math.sin(Date.now() * 0.001 + index) * 2;
          const offsetY = Math.cos(Date.now() * 0.0008 + index) * 1.5;
          
          particle.style.left = `${baseX + offsetX}%`;
          particle.style.top = `${baseY + offsetY}%`;
        });
        
        requestAnimationFrame(floatParticles);
      }
      
      floatParticles();
    }

// Initialiser tout au chargement
    document.addEventListener('DOMContentLoaded', () => {
      initThreeJS();
      initInteractiveParticles();
      
      // Effet de fondu pour les cartes
      const cards = document.querySelectorAll('.glass-card');
      cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
          card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }, 300 + index * 150);
      });
    });
  </script>
</body>
</html>

Related Examples

Basic footer
Basic footer with subscribe to the newsletter section

Mr Robot

3 years ago

10.1k
NebulaFooter
Footer

Juraj

1 year ago

1.5k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Pagedone

2 years ago

3.5k
Footer version Ousmane
Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

Ousmane CISSE

10 months ago

493
Footer - Modern minimal style
clean and uncluttered, following a minimalist approach

Nikita

2 years ago

4.8k
Basic footer
Simple footer with follow us section

Anonymous

2 years ago

2.8k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Pagedone

2 years ago

3.4k
Simple Footer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3k
Horizontal footer with light version
Use this example for simple horizontal layout of footer in light version with brand logo, sitemap links and social media accounts.

Pagedone

2 years ago

3.5k
Get it on Google play / App store section

Rajesh kulkarni

3 years ago

11.2k
Footer, TailwindFlex v2
Another footer version of tailwindflex.com Example users randomly picked: Samuel & Prajwal

Matti

1 year ago

1.4k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k