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

Create a amazing user profile details section to admin to check user and update compatible with the tailwind dark class utility similar to the provided code. also make it future proof so that there can be add more data fields in the profile, also add some utility button like permission management button, etc with future proof so that more can be added in the future. ```<div className="bg gradient to br from gray 100 to gray 200 dark:from gray 800 dark:to slate 900 text gray 800 dark:text gray 200 shadow lg rounded lg p 6 max w 2xl mx auto my 8"> <div className="grid grid cols 1 md:grid cols 3 gap 6"> <div className="md:col span 1"> <img src={user.avatar} alt={user.name} className="w full h auto rounded lg shadow md" /> </div> <div className="md:col span 2"> <h2 className="text 3xl font bold mb 2"> {user.name} </h2> <p className="text slate 600 dark:text gray 400 mb 4"> @{user.username} </p> <div className="space y 2"> <p> <span className="font semibold"> Email: </span>{" "} {user.email} </p> <div className="flex items center"> <span className="font semibold mr 2"> Role: </span> {isEditing.edit === true && isEditing.element === "role" ? ( <UpdateRole user={user} setUser={setUser} setIsEditing={setIsEditing} /> ) : ( <div className="flex items center"> <span className="mr 2"> {user.role} </span> <button onClick={() => setIsEditing({ edit: true, element: "role", }) } className="text blue 500 hover:text blue 600 transition colors duration 200" > <FiEdit2 className="w 4 h 4" /> </button> </div> )} {/* {error && ( <p className="mt 1 text sm text red 600"> {error} </p> )} */} </div> <p> <span className="font semibold"> Joined: </span>{" "} {date(user.createdAt)} </p> <p> <span className="font semibold"> Last Updated: </span>{" "} {date(user.updatedAt)} </p> </div> </div> </div> <div className="mt 6"> <h3 className="text xl font semibold mb 2">Labels</h3> {user.labels && user.labels.length > 0 ? ( <div className="flex flex wrap gap 2"> {user.labels.map((label, index) => ( <span key={index} className="bg blue 100 text blue 800 px 3 py 1 rounded full text sm" > {label} </span> ))} </div> ) : ( <p className="text gray 500"> No labels associated with this user. </p> )} </div> </div>```