I’m a beginner web developer trying to implement more dynamic elements into my react application. I want to try to import Framer-Motion elements but I cannot.
I have followed tutorials both online and the creator (I think?) of Framer-motion;Tom step by step and the end result is not like his. See below My Result
VS Online Youtube Tom’s Result

I have copied and pasted from the website and followed his Youtube tutorial.

This is my Code (which will be the exact same in the tutorial)

import React from 'react'

export const RevealLinks = () => {
  return (

    <section className="grid h-screen place-content-center gap-2 bg-green-300 px-8 text-black">
      <FlipLink href='/'>Twitter</FlipLink>
      <FlipLink href='/'>Twitter</FlipLink>
      <FlipLink href='/'>Twitter</FlipLink>
      <FlipLink href='/'>Twitter</FlipLink>

    </section>

  );
};
const FlipLink = ({ children, href }: {children:string;
    href: string }) => {
        return <a href={href}
        className="relative block overflow-hidden whitespace-nowrap text-4xl font-black uppercase sm:text-7xl md:text-8xl lg:text-9xl"
        >children</a>
}
I have downloaded Tailwindcss, typescript, and framer-motion.

I’m new to web development so it entirely could be an obvious answer and I wouldn’t know. I’ve searched online and haven’t really found anything about this. Any help is appreciated.

Followed Youtube tutorials and expected a similiar result that was shown on a display website and tutorial. I have troubled shooted multiple ‘fixes’ and nothing has changed