DEV Community

Cover image for Animated Footer w/ Float Icon using typescript and tailwind
Bro Karim
Bro Karim

Posted on

1 1 1 1

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

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>
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

Credit

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More