JSFiddle - React, Tailwind, and code Playground

HTML

<div id="profile_block">
                    <div id="left_profile">NickName <br>
                        Новых сообщений: 0
                    </div>
                    <div id="right_profile">
                       <ul>
                        <li>Element</li>
                        <li>Element</li>
                        <li>Element</li>
                        <li>Element</li>
                        <li>Element</li>
                       </ul>
                        </div>
                </div>

CSS

#profile_block{
    float: right;
    height: 75px;
    width: 430px;
}
#left_profile{
    float: left;
    width: 320px;
    text-align: right;
    padding-top: 35px;
}
#right_profile{
    background: url(../images/profaile-foto.png) no-repeat;
    width: 75px;
    height: 75px;
    float: right;
     border-radius: 10px;
    border: 3px solid #3c3c2b;
    position: relative;
    transition: all .2s;
}
#right_profile ul{
    width: 200px;
    display: none;
    background: #1cbcf1;
    list-style: none;
    border-radius: 3px solid #000;
    
}
#right_profile:hover ul{
    display: block;
    position: absolute;
    margin-left: -135px;
    margin-top: 75px;
    z-index: 999;
    border-radius: 10px;
    border: 3px solid #3c3c2b;
    text-align: right;
    padding: 5px;
}