JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timeline-user-line">
    <img src=http://api.randomuser.me/0.2/portraits/men/32.jpg />
</div>

CSS

*{
    box-sizing:border-box;
    padding:0;
    margin:0;
}


.timeline-user-line{
    border-radius: 100%;
    width: 50px;
    height: 50px;
    position:relative;
    border: 3px solid #2cbbee;
     -webkit-transition:all 0.2s ease;
    cursor:pointer;
    -webkit-box-shadow:inset 0 0 0 0px #2cbbee;
    -moz-box-shadow:inset 0 0 0 0px #2cbbee;
    box-shadow:inset 0 0 0 0px #2cbbee;
}

.timeline-user-line:before,.timeline-user-line:after{
    content:'';
    position:absolute;
    
}
.timeline-user-line:before{
    background:#2cbbee;
    height: 2px;
    width: 40px;
    right:-50px;
    top:20px;
}

.timeline-user-line img{
    width:80%;
    height:80%;
    position:absolute;
    left:10%;
    top:10%;
    border-radius: 100%;
}

.timeline-user-line:hover{
    -webkit-box-shadow:inset 0 0 0 10px #2cbbee;
    -moz-box-shadow:inset 0 0 0 10px #2cbbee;
    box-shadow:inset 0 0 0 10px #2cbbee;
}