What could be causing my React and Vite project with Daisy UI to not load the page?

Question

I am writing a project using vite/react and tailwind/daisyUI.I am a beginner and for now just want to have a working layout so don't bother with the main content usage in modal-box

App.jsx

import { Fragment, useState } from 'react'
import './App.css'
import Navbar from './components/layout/Navbar'
import MainContent from './components/layout/MainContent'
import Footer from './components/layout/Footer'
import {BrowserRouter as Router,Route,Routes} from "react-router-dom"
import NotFound from './pages/NotFound'

function App() {
  return (
    <Fragment>
      <Navbar />         
      <Footer />
    </Fragment>
  )
}

export default App

MainContent.jsx

import React from 'react'
import UserCard from '../UserCard'



function MainContent() {
    return (
        <div className="hero min-h-screen bg-base-200 ">
            <div className="hero-content">
                <div className="max-w-md">
                    <h1 className="text-5xl font-bold">Let's find coders</h1>
                    <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
                    <button className="btn btn-primary">Get Started</button>
                    <UserCard/>
                </div>
            </div>
        </div>
    )
}

export default MainContent

UserCard.jsx

import React from 'react'
import MainContent from './layout/MainContent'


function UserCard() {
    return (
        <div>
            <label htmlFor="my-modal-4" className="card w-96 bg-base-100 shadow-xl hover:bg-base-300">
                <div className="card-body">
                    <h2 className="card-title">User</h2>
                    <p>If a dog chews shoes whose shoes does he choose?</p></div></label>
            <label htmlFor="my-modal-4" className="btn">open user</label>
            

            {/* Put this part before </body> tag */}
            <input type="checkbox" id="my-modal-4" className="modal-toggle" />
            <label htmlFor="my-modal-4" className="modal cursor-pointer">
                <label className="modal-box relative" htmlFor="">
                    <h1>User Name</h1>
                    <p>Details Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat quas, amet laudantium tempora facere laboriosam.</p>
                </label>
            </label>

        </div>
    )
}


export default UserCard

I have been trying to have a user card and when I click it. It should show some content about user. However my browser can't load the page it just spins