JSFiddle - React, Tailwind, and code Playground

by Peter Sandoval Moreno

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<div class="iphone">
				  <div class="apagar"></div>
		  <div class="bloqueo"></div>
		  <div class="subir"></div>
		  <div class="bajar"></div>
      <div class="camara"></div>
		  <div class="audio"></div>
		  <div class="pantalla">
			    <div class="texto">
				      <h1>iPhone 5<span>C</span></h1>
				      <h2>Flat Style</h2>
				      <h3>MockUp</h3>
				      <h4>Free Resource</h4>
			    </div>
		  </div>
		  <div class="circulo"></div>
	</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #3A7C9F;
	color: #000300;
}

.iphone {
	width: 275px;
	height: 565px;
	background: #141414;
	border: 5px solid #59C6FF;
	border-radius: 40px;
	box-shadow: -50px 50px 0px 0px #24688B;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

}

.apagar {
	width: 45px;
	height: 3px;
	background: #52B8E8;
	box-shadow: 0px -1px 0px 1px #42A8D8 inset;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

	position: absolute;
	top: -8px;
	right: 15%;

	z-index: -1;
}

.bloqueo {
	width: 3px;
	height: 25px;
	background: #52B8E8;
	box-shadow: 0px -1px 0px 1px #42A8D8 inset;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;

	position: absolute;
	top: 75px;
	left: -8px;
}

.subir {
	width: 3px;
	height: 40px;
	background: #52B8E8;
	box-shadow: 0px -1px 0px 1px #42A8D8 inset;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;

	position: absolute;
	top: 115px;
	left: -8px;
}

.bajar {
	width: 3px;
	height: 40px;
	background: #52B8E8;
	box-shadow: 0px -1px 0px 1px #42A8D8 inset;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;

	position: absolute;
	top: 170px;
	left: -8px;
}

.camara {
	width: 5px;
	height: 5px;
	background: #31A8C0;
	border-radius: 50%;
	box-shadow: 0px 0px 1px 3px #111111,
				0px 0px 1px 4px #222222;

	position: absolute;
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
}

.audio {
	width: 45px;
	height: 10px;
	background: #2B2B2B;
	border-radius: 10px;
	box-shadow: 2px 2px 0px 0px #0F0F0F inset,
				-2px 2px 0px 0px #0F0F0F inset,
				2px -2px 0px 0px #232323 inset,
				-2px -2px 0px 0px #232323 inset,
				0px 0px 1px 1px #222222;

	position: absolute;
	left: 50%;
	top: 35px;
	transform: translateX(-50%);
}

.pantalla {
	width: 230px;
	height: 415px;
	background: #59C6FF;
	border: 2px solid #1F1E1C;

	position: absolute;
	top: 70px;
	left:...