JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="media sidebar-account">
  <div class="media-left">
    <a class="profile-img" href="#">
      <span class="glyphicon glyphicon-camera"></span>
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">[email protected]</h4>
    <p>Some info</p>
    <button class="btn btn-xs btn-default">Settings</button> <button class="btn btn-xs btn-default">Logout</button>
  </div>
</div>

CSS

body{
    margin:40px;
    background-color:#333744;
}
.sidebar-account{
    color:#fff;
}
.sidebar-account a.profile-img{
    font-size:21px;
    color:#aaa;
    border:2px dashed #aaa;
    border-radius:5px;
    display: block;
    width:75px;
    height:75px;
    text-align:center;
    line-height:75px;
    vertical-align:middle;
}
.sidebar-account a.profile-img:hover{
    color:#fff;
    border-color:#fff;
}
.sidebar-account h4{
    font-size:17px;
}