Animated icon button component in React and Tailwind CSS

App.jsx

import { GitHub, Twitter, Facebook, Instagram, Youtube } from "react-feather"
import IconButton from "./components/IconButton"

export default function App() {
  return (
    <main className="App gap-4">
      <h1 className="text-gray-700 font-medium">Checkout Our Socials</h1>
      <IconButton text="Github">
        <GitHub size={20} />
      </IconButton>
      <IconButton text="Facebook" color="bg-blue-500">
        <Facebook size={20} />
      </IconButton>
      <IconButton
        text="/ycldev"
        color="bg-gradient-to-tr from-yellow-500 to-purple-500 via-pink-500"
      >
        <Instagram size={20} />
      </IconButton>
      <IconButton text="/YourCodeLab" color="bg-sky-500">
        <Twitter size={20} />
      </IconButton>
      <IconButton text="@ycldev" color="bg-red-500">
        <Youtube size={20} />
      </IconButton>
    </main>
  )
}

IconButton.jsx

import { useRef } from "react"
import { useState } from "react"

export default function IconButton({ children, text, color, ...props }) {
  const [hovered, setHovered] = useState(false)
  const ref = useRef(null)

  return (
    <button
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className={`
        flex p-2 items-center rounded-lg
        text-white ${color || "bg-gray-600"}
      `}
      {...props}
    >
      {children}
      <div
        style={{ width: hovered ? ref.current?.offsetWidth || 0 : 0 }}
        className="overflow-x-hidden transition-all duration-300 ease-out"
      >
        <span ref={ref} className="px-1.5">
          {text}
        </span>
      </div>
    </button>
  )
}