Animated Footer w/ Float Icon using typescript and tailwind

This footer component showcases social media icons with an engaging animation. On hover, the icons subtly float upward and rotate, revealing the corresponding platform name below.

Live Demo

The demo dynamically adjusts to your system's theme (light or dark).

Source Code (footer-animation.tsx)

import { Send } from "lucide-react";

export function Footer() {
  return (
    <div className="w-full flex justify-between items-center">
      {/* Email Section */}
      <div className="flex items-center gap-2">
        <Send className="h-7 w-7" />
        <a className="text-2xl hover:underline" href="mailto:hello@brokariim.space">hello@brokariim.space</a>
      </div>

      {/* Social Icons */}
      <div className="flex items-center relative">
        <a className="relative group grid place-items-center" href="#">
          <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 alt="Whatsapp Icon" className="w-16 h-16" src="/wa3d.png" />
          </div>
          Whatsapp
        </a>
        <a className="relative group grid place-items-center" href="#">
          <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 alt="Instagram Icon" className="w-16 h-16" src="/ig3d.png" />
          </div>
          Instagram
        </a>
        <a className="relative group grid place-items-center" href="#">
          <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 alt="Discord Icon" className="w-16 h-16" src="/dc3d.png" />
          </div>
          Discord
        </a>
        <a className="relative group grid place-items-center" href="#">
          <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 alt="LinkedIn Icon" className="w-16 h-16" src="/ln3d.png" />
          </div>
          LinkedIn
        </a>
        <a className="relative group grid place-items-center" href="#">
          <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 alt="TikTok Icon" className="w-16 h-16" src="/tiktok3d.png" />
          </div>
          TikTok
        </a>
      </div>
    </div>
  );
}

Attribution:

• 3D Icons: Figma Community

This revised version improves code clarity, adds alt text to images for accessibility, and corrects minor formatting issues. The email address is also updated for consistency.

The above is the detailed content of Animated Footer w/ Float Icon using typescript and tailwind. For more information, please follow other related articles on the PHP Chinese website!