JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<br/>
<h2>
Large Icons
</h2>
<div class="bg-primary">
<span>WW</span>
</div>
<div class="bg-warning">
<span>
DS</span>
</div>
<div class="bg-danger">
<span>CC</span>
</div>

<hr/>
<h2>
Small Icons
</h2>
<div id="smallicons">
  <div class="bg-primary">
  <span>CC</span>
  </div>
 
 <div class="bg-warning">
  <span>
  WW</span>
  </div>
  
  <div class="bg-danger">
  <span>SW</span>
  </div>
</div>

CSS

div#smallicons {
  display:table;
  border-radius:60px;
  height:120px;
  width:120px
}
span {
  display:table-cell;
  text-align:center;
  font-size:60px;
  vertical-align:middle
}