JSFiddle - React, Tailwind, and code Playground

by Akhil Yalla

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<html>
<body>
<div class="profile-item" style="height:400px;">
<div class="profile-picture big-profile-picture">
  <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" >
<span style="position: absolute;bottom: 45px;right: 0;"><i style="color:white;padding:5px; border-radius:50%;background:#FFd700;border:2px solid #FFd700;" class="fa fa-trophy fa-3x"></i></span>
 </div> 
</div>
</body>
</html>

CSS

.profile-item {
  text-align: center;
  border: none;
}

.profile-picture {
  padding: 2px;
  border-radius: 0%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  overflow: hidden; position: relative;
}

.profile-picture img {
  width: 240px;
  height: 240px;
  margin-top: -5px;
  text-align:center;
}