HTML:
<div id="hotrofm-group">
    <div id="cover-hotrofm-group">
        <div id="hotrofm_box">
            <div id="profile-img"> <img style="max-width: 80px;" src="http://r37.imgfast.net/users/3713/30/06/42/avatars/gallery/avatar10.png" alt="Cover hotrofm" class="avatar-img"></div>
            <div id="info-box">
                <div id="info-name"><a href="https://www.facebook.com/groups/235950456922734/" target="_blank" rel="nofollow" title="Nhóm Hotrofm">Nhóm Hotrofm</a> <span class="xacthuc"></span></div>
            </div>
        </div>
        <div id="info-content"> <a href="https://www.facebook.com/groups/235950456922734/" target="_blank" rel="nofollow" title="Tham Gia Nhóm Hotrofm Ngay"><i class="fa fa-users"></i> Tham Gia Ngay</a></div>
    </div>
</div>

CSS:
#cover-hotrofm-group {
    background: url(https://i.imgur.com/xtRIhDG.png) scroll no-repeat top center;
    overflow: auto;
}
#hotrofm_box {
    padding: 30px 50px 0 10px;
    border: solid 1px #dedede;
    width: 300px;
    background-color: #fcfcfc;
    margin-top: 140px;
}
#profile-img {
    background-color: #FFF;
    border: 1px solid #DEDEDE;
    margin-top: -100px;
    position: absolute;
    width: 86px;
    height: 86px;
    float: left;
}
#info-box {
    margin-left: 90px;
    margin-top: -60px;
    position: absolute;
}
#info-name {
    float: left;
    overflow: hidden;
    word-wrap: break-word;
}
#info-name a {
    width: 120px;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(0,0,0,.4);
    color: #fff;
}
.xacthuc {
    background-image: url(https://i.imgur.com/Dm6ltHm.png);
    background-repeat: no-repeat;
    background-size: auto;
    display: inline-block;
    height: 26px;
    vertical-align: -10px;
    width: 26px;
}
#info-content {
    margin-top: -28px;
    background-position: 0 -46px;
    margin-right: 10px;
    line-height: 20px;
    float: right;
    padding: 0 10px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    text-shadow: 0 0 0 transparent, 0 1px 0 #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    font-weight: 700;
    background-color: #f6f7f8;
    background-image: url(https://i35.servimg.com/u/f35/19/53/09/53/thamgi10.png);
    background-repeat: repeat-x;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    -khtml-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
#info-content a {
    text-decoration: none;
    font-size: 12px;
    color: #4e5665;
}