Animated Footer w/ Float Icon using typescript and tailwind

A footer component featuring social media icons that float upward with a rotation effect when hovered, revealing their respective platform names underneath.

Demo

// Detect dark theme
var iframe = document.getElementById(‘tweet-188155…


This content originally appeared on DEV Community and was authored by Bro Karim

A footer component featuring social media icons that float upward with a rotation effect when hovered, revealing their respective platform names underneath.

Demo

// Detect dark theme var iframe = document.getElementById('tweet-1881554286825689489-655'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1881554286825689489&theme=dark" }

Source Code

footer-animation.tsx

import { Send } from "lucide-react";

export function Footer() {
  return (
    <>
        <footer className="w-full mx-auto container max-w-7xl rounded-2xl px-4 h-16 flex items-center py-3 bg-gray-100">
          <div className="w-full  flex justify-between items-center">
            {/* Email section */}
            <div className="flex items-center gap-2">
              <Send className="size-7" />
              <Link href="mailto:hello@danielsun.space" className="text-2xl hover:underline">
                hello@brokariim.space
              </Link>
            </div>

            {/* Social icons */}
            <div className="flex items-center relative">
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/wa3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Whatsapp</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" -rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/ig3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Instagram</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/dc3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Discord</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" -rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/ln3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Linkdln</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/tiktok3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Tiktok</span>
              </Link>
            </div>
          </div>
        </footer>
    </>
  );
}

Credit

•⁠ ⁠3d icon : https://www.figma.com/community/file/1015485067395949509


This content originally appeared on DEV Community and was authored by Bro Karim


Print Share Comment Cite Upload Translate Updates
APA

Bro Karim | Sciencx (2025-01-21T04:10:31+00:00) Animated Footer w/ Float Icon using typescript and tailwind. Retrieved from https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/

MLA
" » Animated Footer w/ Float Icon using typescript and tailwind." Bro Karim | Sciencx - Tuesday January 21, 2025, https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/
HARVARD
Bro Karim | Sciencx Tuesday January 21, 2025 » Animated Footer w/ Float Icon using typescript and tailwind., viewed ,<https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/>
VANCOUVER
Bro Karim | Sciencx - » Animated Footer w/ Float Icon using typescript and tailwind. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/
CHICAGO
" » Animated Footer w/ Float Icon using typescript and tailwind." Bro Karim | Sciencx - Accessed . https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/
IEEE
" » Animated Footer w/ Float Icon using typescript and tailwind." Bro Karim | Sciencx [Online]. Available: https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/. [Accessed: ]
rf:citation
» Animated Footer w/ Float Icon using typescript and tailwind | Bro Karim | Sciencx | https://www.scien.cx/2025/01/21/animated-footer-w-float-icon-using-typescript-and-tailwind/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts