JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class='userBackdrop'> <i class='fa fa-user fa-5x'></i>
 <b class='userName'>Shmoyojoe</b>

</div>

CSS

body {
    background-image: url 'http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg';
    background-repeat: no-repeat
}
.userBackdrop {
    border-radius: 20px;
    height: 110px;
    width: 110px;
    background: transparent;
    border: 3px solid #73318e;
    color: #73318e;
    text-align: center;
    cursor: pointer;
    transition: background 1s linear;
    transition: color 0.5s linear
}
.userBackdrop:hover {
    background: #73318e;
    color: white
}
.userBackdrop i {
    margin-top: 5px;
}
.userName {
    font-family: Helvetica
}