nextjs-tailwindcss-headlessUI-project/app/components/card/page.tsx

"use client";
import { useHover } from "usehooks-ts";
import { useRef } from "react";
import Image from "next/image";

export default function Page() {
  const ref = useRef(null);
  const isHover = useHover(ref);

  return (
    <div className="bg-white rounded-lg cursor-pointer w-64">
      <div className="relative w-full h-auto" ref={ref}>
        <Image
          width={500}
          height={250}
          className={"object-cover w-full rounded-t-lg"}
          src={
            !isHover
              ? "https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png"
              : "https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif"
          }
          alt={"img"}
        />
        <div
          className={`absolute bottom-2 right-2
                                bg-gray-600 text-white text-xs
                                px-1 py-0.5 rounded-md  
                                ${isHover ? "hidden" : "flex"}`}
        >
          03:14
        </div>
      </div>
      <div className="flex justify-between text-xs mt-2 text-gray-500 px-2">
        <div className="flex items-center gap-1 my-1">
          <Image
            width={32}
            height={38}
            alt={""}
            src="https://res-academy.cache.wpscdn.com/static/images/icon_excel.png"
          />
          <span>Spread</span>
        </div>
        <div>18.0K views</div>
      </div>
      <h1 className="text-md font-semibold mt-2 px-2 pb-3">How use WPS</h1>
    </div>
  );
}