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

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!

Author:
Abdul Baset Bappy

8 months ago

658
Footer

Author:
Maxim

8 months ago

985
Responsive footer

Author:
Lukas Müller

2 years ago

11.2k
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

1 year ago

2.9k
Responsive Footer

Author:
ariaw

7 months ago

1.7k
Simple Footer 2

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.9k
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

5 months ago

558
footer

Author:
Raul antonio de la cruz hernandez

23 hours ago

7
Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

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

Author:
ABDESLAMI ACHRAF

1 year ago

3.4k
footer

Author:
isolde

1 year ago

6.5k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components