Contact Form - Copy this React, Tailwind Component to your project

ClassName="overflow x auto" import React from "react"; function UpdateProfile() { return ( <div className="max w md p 6 bg white rounded lg shadow md"> <h2 className="text 2xl font bold mb 4">Update Profile</h2> <form> <div className="mb 4"> <label className="block text gray 700">Name</label> <input type="text" name="name" onChange={(e) => console.log(e.target.value)} className="w full px 3 py 2 border border gray 300 rounded md" placeholder="Enter your name" required /> </div> <div className="mb 4"> <label className="block text gray 700">Username</label> <input type="text" name="username" // value={formData.username} // onChange={handleChange} className="w full px 3 py 2 border border gray 300 rounded md" placeholder="Enter your username" required /> </div> <div className="mb 4"> <label className="block text gray 700">Password</label> <input type="password" name="password" // value={formData.password} // onChange={handleChange} className="w full px 3 py 2 border border gray 300 rounded md" placeholder="Enter your password" required /> </div> <div className="mb 4"> <label className="block text gray 700">Confirm Password</label> <input type="password" name="confirmPassword" // value={formData.confirmPassword} // onChange={handleChange} className="w full px 3 py 2 border border gray 300 rounded md" placeholder="Confirm your password" required /> </div> <button type="submit" className="w full bg blue 500 text white px 4 py 2 rounded md hover:bg blue 600 transition" > Update </button> </form> </div> ); } export default UpdateProfile; import React from "react"; import UpdateProfile from "./updateProfile.jsx"; import MyOrder from "./MyOrder.jsx"; function MyProfile() { return ( <div className="md:grid md:grid cols [1fr_2fr] md:gap 4"> <div> <UpdateProfile /> </div> <div className="overflow x auto"> <MyOrder /> </div> </div> ); } export default MyProfile; this is my code make it responsive for mobile devices