JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<a>link</a>


<div align="center" id="userInfo" hidden>
        <h1>Your Profile</h1>
        <table>
            <tr>
                <td>Name</td><td id="ProfileUserName">USER_NAME</td>
            </tr>
            <tr>
                <td>User ID</td><td id="ProfileUserID">USER_ID</td>
            </tr>
            <tr>
                <td>Experience</td><td id="ProfileExperience">USER_EXPIERIENCE</td>
            </tr>
            <tr>
                <td>Media shared</td><td id="ProfileMediaShared">USER_MEDIA_SHARED</td>
            </tr>
            <tr>
                <td>Media rated</td><td id="ProfileMediaRated">USER_MEDIA_RATED</td>
            </tr>
        </table>
        <button id="editProfileButton">Edit profile</button>
        <button id="deleteProfileButton">Delete profile</button>
        <button id="backToMainButton">Back</button>
    </div>

CSS

#userInfo{
 width:400px;
height:140px;
 border:4px solid black;   
}

JavaScript

$('a').mouseenter(function() {
  $('#userInfo').show();
});
$('a').mouseleave(function() {
  $('#userInfo').hide();
});