Magical Hover Card

import { useRef, useEffect } from "react";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";

const cn = (...args: any[]) => {
  return twMerge(clsx(args));
};

const MagicHoverCard = ({
  children,

import { MagicalCard } from '../MagicalCard';
import { BsGoogle, BsMicrosoft, BsSpotify, BsYoutube } from "react-icons/bs";

export default function Home(){
  <div
    className="flex flex-wrap items-center justify-center gap-2 group p-3"
    id="cards-container"
  > 
  {/* Above line is must the `group` and id="cards-container" */}