Home
Omer fils ELENGA
Minimalist iOS 26 Foote

Minimalist iOS 26 Foote

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

Footer

Author Omer fils ELENGA

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

Responsive Footer
source: https://kitwind.io/products/kometa/components/footers

Author:
Manuela Bianka

3 years ago

16.6k
NebulaFooter
Footer

Author:
Juraj

10 months ago

889
Responsive footer

Author:
Lukas Müller

2 years ago

11.4k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2.1k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 year ago

2.5k
footer

Author:
isolde

2 years ago

6.6k
Get it on Google play / App store section

Author:
Rajesh kulkarni

3 years ago

10.2k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

11 months ago

1.2k
Active Beauty Main Page

Author:
Maxim

10 months ago

1.1k
Simple footer with CTA Button
You can use this simple footer as a base for any type of websites. It includes a single CTAs button that you can customize according to your requirement.

Author:
Pagedone

1 year ago

2k
Big footer with lots of links

Author:
Henrik R.

1 year ago

3.8k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components