JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

<div class='bro'>
  <div class='head'>
    <h2>Server Notes</h2>
    <div class='hair'>
    </div>
  </div>
  <div class='chest'>
    <div class='arm right-arm flex'>
      <div class='forearm'>
        <div class='hand'>
        </div>
      </div>
    </div>
    <div class='arm left-arm'>
      <div class='forearm'>
        <div class='hand'>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.bro{
  position: absolute;
  left: 100px;
}
.bro.two{
  left: 300px;
}
.head{
  /*Head*/
  position: relative;
  top: 35px;
  width: 150px;
  height: 125px;
  padding-top: 20px;
  line-height: 1em;
  text-align: center;
  background: #FD9B2C;
  border-radius: 100%;
  border: 3px solid black;
  z-index: -1;
  -webkit-transform: rotateY(0deg);
}
.head:before{
  /*head band*/
  content: '';
  display: block;
  background: blue;
  height: 20px;
  position: relative;
  left: 4px;
  width: 142px;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
}

.hair{
  /*left peak*/
  display: block;
  content: '';
  position: relative;
  top: -160px;
  left: 15px;
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 45px solid black;
  z-index: 2;
}
.hair:before{
  /*middle peak*/
  display: block;
  content: '';
  position: relative;
  top: -20px;
  left: 0;
  width: 0; 
	height: 0; 
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 65px solid black;
}
.hair:after{
  /*right peak*/
  display: block;
  content: '';
  position: relative;
  top: -65px;
  left: 45px;
  width: 0; 
	height: 0; 
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 45px solid black;
}

.chest{
  /*middle of shirt*/
  position: relative;
  display: block;
  top: 25px;
  left: 30px;
  height: 125px;
  width: 95px;
  background: red;
  z-index: -1;
}
.chest:before{
  /*left side of shirt*/
  content: '';
  display: inline-block;
  position: relative;
  left: -12px;
  top: -5px;
  height: 125px;
  width: 50px;
  background: red;
  border-left: 2px solid black;
  border-top: 2px solid black;
  -webkit-transform: rotate(-10deg);
}
.chest:after{
  /*right side of shirt*/
  content: '';
  display: inline-block;
  position: absolute;
  left: 62px;
  top: -4px;
  height: 125px;
  width: 45px;
  background: red;
  border-right: 2px solid black;
 ...