JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="homeFeature">
			<div class="macbookWrapper">
			<div class="screenAlum">
			<div class="screenBezel">
			<div class="camera"></div>
			<div class="screenScreen">
			<div class="cycle-slideshow" data-cycle-timeout="2000" style="">
			<img src="img/featured/index-feature.gif" alt="slideshow"/>
			</div>
			</div>
			<div class="computerLabel">miBook Pro</div>
			</div>
			</div>
			<div class="body">
			<div class="flipper"></div>
			<div class="lock"></div>
			</div>
			<div class="underBody"></div>
			</div>
		</div>

SCSS

// mac 
.macbookWrapper {
	max-width: 800px;
	max-height: 400px;
	min-height:400px;
	margin:0 auto;
	display:block;
	color:transparent;
	line-height:0;
	padding:0;
	margin-top:20px;
	.screenAlum {
		margin:0 auto;
		width:90%;
		height:92%;
		background:#999;
		background: rgb(153,153,153); /* Old browsers */
		background: -moz-linear-gradient(-45deg, rgba(153,153,153,1) 0%, rgba(227,227,227,1) 47%, rgba(153,153,153,1) 82%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(153,153,153,1)), color-stop(47%,rgba(227,227,227,1)), color-stop(82%,rgba(153,153,153,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg, rgba(153,153,153,1) 0%,rgba(227,227,227,1) 47%,rgba(153,153,153,1) 82%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg, rgba(153,153,153,1) 0%,rgba(227,227,227,1) 47%,rgba(153,153,153,1) 82%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg, rgba(153,153,153,1) 0%,rgba(227,227,227,1) 47%,rgba(153,153,153,1) 82%); /* IE10+ */
		background: linear-gradient(135deg, rgba(153,153,153,1) 0%,rgba(227,227,227,1) 47%,rgba(153,153,153,1) 82%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#999999',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		padding:4px 4px 0;
		border-radius:10px 10px 0 0;
		border-bottom:1px solid #555;
		box-shadow: inset 0 0 3px #e3e3e3;
	}
	.screenBezel {
		background:#111;
		height:100%;
		border-radius:10px 10px 0 0;
		border:1px solid #555;
		background: rgb(34,34,34); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(34,34,34,1) 0%, rgba(40,40,40,1) 12%, rgba(46,46,46,1) 25%, rgba(34,34,34,1) 26%, rgba(32,32,32,1) 39%, rgba(20,20,20,1) 50%, rgba(0,0,0,1) 51%, rgba(8,8,8,1) 60%, rgba(19,19,19,1) 76%, rgba(13,13,13,1) 91%, rgba(9,9,9,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,34,34,1)),...