Hi I’m a web dev student and I was assigned to finish a simple web design using tailwind css and reactjs, I was taught about it yesterday so there are a lot of things I don’t know about it. I’m trying to make a background using circle shapes and I stumbled upon an issue where I can’t seem to place the shapes on the right side, I’m sorry I need some help about this.

import Navbar from "./components/navbar"
import "./style.css"


function App() {
  return (
    <div className="bg-neutral-200 min-h-screen">
        <div>
          <div className="absolute ml-40 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl"></div>
          <div className="absolute ml-96 w-96 h-96 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl"></div>
          <div className="absolute w-96 h-96 bg-green-400 rounded-full mix-blend-multiply filter blur-xl"></div>
          <div className="absolute my-48 ml-96 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl"></div>
          <div className="absolute my-48 ml-40 w-96 h-96 bg-cyan-400 rounded-full mix-blend-multiply filter blur-xl"></div>
          <div className="absolute my-48 w-96 h-96 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl"></div>
        </div>
        <Navbar/>
        <div className="mt-48 ml-40 max-w-xl text-slate-900">
            <h1 className="text-6xl font-semibold leading-tight">Hi,<br/> How Are You Doing?</h1>
            <p>Lorem ipsum100</p>
        </div>
    </div>
  )
}

export default App