JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      
      <div id="user" class="col-12">
    <div class="col-12 mx-auto" id="user-avatar">
        <img class="d-block mx-auto" src="assets/users/av-lg/liane.png" />
        <div class="middle">
            <i class="fas fa-camera-alt"></i>
            <p>Edit Avatar</p>
        </div>
    </div>
    <p id="username" class="text-center"><span>Howdy </span>Liane</p>
    <div id="xp-bar" class="text-left">
        <div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
    </div>
    <p id="stats" class="text-right">Level 1</p>
</div>

CSS

#user-avatar {
    background: #ff4e00;
    border-radius: 50%;
    width: 250px;
    margin-bottom: 25px;
    position: relative;
}

#user img {
    border-radius: 50%;
    width: 250px;
    transition: .5s ease;
    backface-visibility: hidden;
}

#user-avatar:hover img {
    cursor: pointer;
    opacity: 0.3;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.middle i {
    font-size: 34px;
}

#user-avatar:hover .middle {
    opacity: 1;
    cursor: pointer;
}