Home
Akram Khan
beautifull footer

beautifull footer

We create a Advance animated footer section using tailwindcss and custom css

This tailwind example is contributed by Akram Khan, on 06-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Akram Khan

1.7k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extreme Footer Design</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes neon-pulse {
            0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
            50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
        }

.neon-text {
            animation: neon-pulse 1.5s infinite alternate;
        }

.bg-animated {
            background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.glitch {
            position: relative;
        }

.glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

.glitch::before {
            left: 2px;
            text-shadow: -2px 0 #ff00de;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 3s infinite linear alternate-reverse;
        }

.glitch::after {
            left: -2px;
            text-shadow: -2px 0 #00ffff;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse;
        }

@keyframes glitch-anim {
            0% { clip: rect(39px, 9999px, 71px, 0); }
            5% { clip: rect(76px, 9999px, 53px, 0); }
            10% { clip: rect(42px, 9999px, 16px, 0); }
            15% { clip: rect(94px, 9999px, 33px, 0); }
            20% { clip: rect(3px, 9999px, 5px, 0); }
            25% { clip: rect(21px, 9999px, 100px, 0); }
            30% { clip: rect(79px, 9999px, 82px, 0); }
            35% { clip: rect(56px, 9999px, 18px, 0); }
            40% { clip: rect(6px, 9999px, 38px, 0); }
            45% { clip: rect(65px, 9999px, 91px, 0); }
            50% { clip: rect(31px, 9999px, 56px, 0); }
            55% { clip: rect(88px, 9999px, 71px, 0); }
            60% { clip: rect(13px, 9999px, 43px, 0); }
            65% { clip: rect(50px, 9999px, 9px, 0); }
            70% { clip: rect(27px, 9999px, 68px, 0); }
            75% { clip: rect(85px, 9999px, 25px, 0); }
            80% { clip: rect(44px, 9999px, 93px, 0); }
            85% { clip: rect(19px, 9999px, 39px, 0); }
            90% { clip: rect(71px, 9999px, 86px, 0); }
            95% { clip: rect(2px, 9999px, 62px, 0); }
            100% { clip: rect(54px, 9999px, 47px, 0); }
        }

.hover-3d {
            transition: transform 0.3s;
        }

.hover-3d:hover {
            transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
        }

.neon-border {
            box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff;
            animation: neon-border-pulse 1.5s infinite alternate;
        }

@keyframes neon-border-pulse {
            0%, 100% { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff; }
            50% { box-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff; }
        }

.cyber-grid {
            background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            animation: cyber-grid-move 20s linear infinite;
        }

@keyframes cyber-grid-move {
            0% { background-position: 0 0; }
            100% { background-position: 20px 20px; }
        }
    </style>
</head>
<body class="bg-black min-h-screen flex flex-col">
    <div class="flex-grow"></div>
    <footer class="bg-animated cyber-grid relative overflow-hidden">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center md:text-left">
                    <h3 class="text-2xl font-bold text-white neon-text mb-4">CYBERLINK</h3>
                    <p class="text-cyan-300">Connecting the digital realm</p>
                </div>
                <div class="text-center">
                    <h4 class="text-xl font-bold text-white mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300">Home</a></li>
                        <li><a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300">Services</a></li>
                        <li><a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300">About</a></li>
                        <li><a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300">Contact</a></li>
                    </ul>
                </div>
                <div class="text-center md:text-right">
                    <h4 class="text-xl font-bold text-white mb-4">Stay Connected</h4>
                    <div class="flex justify-center md:justify-end space-x-4">
                        <a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300"><i class="fab fa-facebook-f text-2xl"></i></a>
                        <a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300"><i class="fab fa-twitter text-2xl"></i></a>
                        <a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300"><i class="fab fa-instagram text-2xl"></i></a>
                        <a href="#" class="text-cyan-300 hover:text-white transition-colors duration-300"><i class="fab fa-linkedin-in text-2xl"></i></a>
                    </div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-cyan-800">
                <p class="text-center text-cyan-300">&copy; 2024 CYBERLINK. All rights reserved.</p>
            </div>
        </div>
        <div class="absolute inset-0 pointer-events-none neon-border"></div>
    </footer>
</body>
</html>

Related Examples

portifolio
skills

Author:
ishimwe prince

1 month ago

33
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.4k
Responsive Footer

Author:
ᴀʀ!ᴀ

2 months ago

609
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

5 months ago

641
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Author:
Pagedone

1 year ago

2.8k
Simple Footer

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

8 months ago

2.1k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

11 months ago

2.2k
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

2k
Footer with 3 sections

Author:
Mr Robot

2 years ago

12.6k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

11 months ago

1.5k
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

2 weeks ago

33
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

1 month ago

164

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components