Hi, I was working on the front end part of my website but jsx is not loading
heres my code:
import React from "react";
import NavBar from "../Components/NavBar";
const Contact = () => {
#Unknown Channel
<NavBar />
<div className=" flex justify-center">
<h1 className=" text-3xl font-bold m-0 mt-[4rem]">Contact us</h1>
</div>
<div className=" flex justify-center mt-[3rem] font-semibold text-lg">
<h2>Please fill out the below form</h2>
</div>
<form className=" translate-y-[10rem] md: translate-x-[3rem] ">
<div>
<label htmlFor="fullname" className=" ml-4 font-bold text-lg">
Full name
</label>
<br />
<input
type="text"
id="fulname"
placeholder="Jhon Doe"
className=" rounded-sm bg-gray-700 ml-4 mt-6 p-1 md: w-[20rem] lg:w-[30rem]"
/>
</div>

<div className=" mt-4">
<label htmlFor="email" className="ml-4 font-bold text-lg ">
Email
</label>
<br />
<input
type="text"
id="email"
placeholder="jhon@email.com"
className=" rounded-sm bg-gray-700 ml-4 mt-6 p-1 md: w-[20rem] lg:w-[30rem]"
/>
</div>

<div className=" mt-4">
<label htmlFor="message" className="ml-4 font-bold text-lg">
Message
</label>
<br />
<textarea
name="Type your message"
id="typemessage"
className="w-[15rem] h-[15rem] border-solid border-black mt-8 ml-4 bg-gray-700 rounded-sm md:w-[20rem] lg:w-[30rem]"
></textarea>
</div>

<div>
<button
type="submit"
className=" mt-9 ml-4 mb-5 rounded-lg w-[6rem] h-[3rem] bg-blue-700"
>
Send
</button>
</div>
</form>
</>;
};

export default Contact;

here is the out put