JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

    <div id="timeline-block">
        <div id="timeline-user">
            <span class="timeline-user-border">
                <a href="#"><img src="http://api.randomuser.me/0.2/portraits/men/32.jpg" class="timeline-user" /></a>
            </span>
            <span class="timeline-user-line"></span>
        </div>
    </div>

</div>

CSS

*{
    padding: 0;
    margin: 0;
}

#timeline-user > .timeline-user-border > a >  .timeline-user{
    border-radius: 30px;
    width: 50px;
    height: 50px;
}

#timeline-user > .timeline-user-border{
    border: 3px solid #2cbbee;
    padding: 7px;
    border-radius: 35px;
    width: 50px;
    height: 50px;
    -webkit-transition:all 0.2s ease;
}

#timeline-user > .timeline-user-border: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;
}

#timeline-user > .timeline-user-line{
    height: 2px;
    width: 40px;
    background: #2cbbee;
}

#timeline-user > span{
    vertical-align: middle;
    display: inline-block;
}