User Table - Copy this React, Tailwind Component to your project

I need this code table mobile responsive : "use client"; import axios from "axios"; import React, { useEffect, useState } from "react"; import NavBar from "../components/NavBar"; import { FaTrash, FaUserEdit } from "react icons/fa"; import { FaUsersViewfinder } from "react icons/fa6"; import Image from "next/image"; import Link from "next/link"; const User = () => { const [user, setUser] = useState(); const [roles, setRoles] = useState({}); // State to store roles of each user individually const handleRoleChange = async (e, userId) => { const { value } = e.target; setRoles((prevRoles) => ({ ...prevRoles, [userId]: value, // Update only the role of the specific user })); // Create FormData to send the data const formData = new FormData(); // Add each role to FormData Object.entries({ ...roles, [userId]: value }).forEach(([id, role]) => { formData.append(`roles[${id}]`, role); }); try { const { data } = await axios.put("/api/user", formData, { headers: { "Content Type": "application/json", }, }); console.log(data); } catch (error) { console.log(error); } }; const fetchUser = async () => { try { const { data } = await axios.get("/api/user"); setUser(data); } catch (error) { console.error("Error fetching user data:", error); } }; const userDelete = async (id) => { setUser(undefined); const { data } = await axios.delete(`/api/register?id=${id}`); if (data.success) { fetchUser(); console.log(data); } }; useEffect(() => { fetchUser(); }, []); if (user == undefined) { return ( <> <div className="flex items center justify center h dvh"> <div className="w 16 h 16 border 4 border blue 500 border dashed rounded full animate spin"></div> </div> </> ); } return ( <> <div className="relative z 0"> <NavBar /> </div> <div className="w full max w 4xl mx auto rounded overflow hidden bg transparent z 30 md:p 5"> <div className="flex justify between items center p 5"> <h2 className="font bold text gray 800 text xl uppercase"> User Details </h2> <Link href="/user/attendance" className="px 4 py 2 rounded lg shadow md text white bg gradient radial from indigo 600 to indigo 900 hover:bg gradient to t hover:scale 95 transition duration 200 z 30" > All Attendance </Link> </div> <div className="overflow x auto z 50 shadow"> <div className="relative shadow md sm:rounded lg"> <table className="min w full text sm text left rtl:text right text gray 500"> <thead className="text xs text gray 700 uppercase bg gradient to tr from indigo 300 to indigo 100"> <tr> <th scope="col" className="px 6 py 3"> Name </th> <th scope="col" className="px 6 py 3"> Email </th> <th scope="col" className="px 6 py 3"> Role </th> <th scope="col" className="text center"> Action </th> </tr> </thead> <tbody> {user?.map((item, index) => ( <tr key={item._id} className="bg transparent border b hover:bg gray 50" > <th className="px 6 py 4 font medium text gray 900"> <div className="flex items center gap 2"> <Image src={item.image} width={40} height={40} className="rounded full shadow" alt="profile image" /> <h2>{item.name}</h2> </div> </th> <td className="px 6 py 4">{item.email}</td> <td className="px 6 py 4"> <select name="role" value={roles[item._id] || item.role} onChange={(e) => handleRoleChange(e, item._id)} > <option disabled> select role </option> <option value="admin">Admin</option> <option value="user">User</option> </select> </td> <td className="flex items center justify center flex col md:flex row"> <Link href={`/user/attendance/show/${item._id}`} title="show attendance history" className="font medium text blue 600 hover:underline text 2xl p 2" > <FaUsersViewfinder /> </Link> <button onClick={() => userDelete(item._id)} title="Delete user" className="font medium text red 600 hover:underline text xl p 2" > <FaTrash /> </button> </td> </tr> ))} </tbody> </table> </div> </div> </div> </> ); }; export default User;