calvinusesyourcode

/** @see https://tailwindcss.com/docs/hover-focus-and-other-states */
export default function NotHover() {
  const items = ['Home', 'Products', 'Pricing']
  return (
    <div className="flex justify-center items-center h-screen w-screen relative overflow-hidden ">
      <img src="/desert.png" className="absolute inset-0 w-full h-full object-cover" />
      <div className="bg-transparent group grid grid-cols-3 gap-4 relative z-10 font-bold text-white select-none">
        {items.map((item, index) => (
          <div key={index} className={'m-4 text-center transition-all duration-300 ease-in-out group-has-[:hover]:blur-sm hover:!blur-none hover:cursor-pointer hover:scale-105'}>
            <p>{item}</p>