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

Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Author:
Pagedone

1 year ago

2.8k
Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Author:
Pagedone

1 year ago

2.8k
NebulaFooter
Footer

Author:
Juraj

8 months ago

876
Footer with social icons

Author:
Mr Robot

3 years ago

15.9k
Simple Footer 2

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

1 year ago

2k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

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

Author:
Nikita

1 year ago

4.3k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

6 months ago

1.1k
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.7k
footer
Footer with contact info, navigation, account links, and social media icons.

Author:
Yasmin Rodrigues

1 year ago

2.9k
Newsletter form with Pre-footer CTA
Get started with this example with a CTA section before the footer, a sitemap links, the logo of your brand, a newsletter sign-up form, and the copyright notice.

Author:
Pagedone

1 year ago

2.4k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components