JSFiddle - React, Tailwind, and code Playground

MAC toolbar css

by Andrew Pougher

HTML

<div class="screen">
  <div class="toolbar">
    		
    			<div class="buttons clearfix">
    				<span class="left red"></span>
    				<span class="left yellow"></span>
    				<span class="left green"></span>
    			</div>
    			
    			<div class="title" id="pageTitle">
    				<span><span>index</span>.html</span>
    			</div>
    			
          </div></div>

CSS

.screen .toolbar {
	background: #E1E0E0;
	height: 35px;
	padding: 0px 0px 0px 11px;
}

.screen .toolbar .buttons {
	float: left;
	height: 13px;
	margin-top: 11px;
}

.screen .toolbar .title {
	font-size: 14px;
	color: #000;
	text-align: center;
	margin-right: 80px;
	padding-top: 5px;
}

.screen .toolbar .left {
	display: block;
	width: 13px;
	height: 13px;
	float: left;
	border-radius: 13px;
	margin-right: 6px;
}

.screen .toolbar .left.red {
	background: #E74C3C;
}

.screen .toolbar .left.yellow {
	background: #F4A62A;
}

.screen .toolbar .left.green {
	background: #16A085;
}


.styleEditor {
	position: fixed;
	left: -300px;
	top: 0px;
	height: 100%;
	width: 300px;
	background: #f9f9f9;
	z-index: 1000;
	box-shadow: 6px 0px 1px rgba(0,0,0,0.1);
	padding: 20px;
	overflow-y: auto;
	overflow-x: visible;
}

.styleEditor .tab-content {
	padding: 0px;
	border: 0px;
	border-radius: 0px;
	margin-bottom: 20px;
	border-bottom: 2px dashed #ccc;
}

.styleEditor .nav-tabs li span {
	font-size: 12px;
	color: #34495E;
}

.styleEditor form {
	width: 100%;
	overflow: visible;
	position: relative;
	margin-bottom: 20px;
}

.styleEditor > a.close {
	position: absolute;
	top: 20px;
	right: 15px;
	font-size: 20px;
}

.styleEditor h3 {
	font-size: 17px;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 30px;
}

.styleEditor .control-label {
	line-height: 20px;
	padding-top: 6px;
	font-size: 13px;
	float: left;
	width: 55%;
}

.styleEditor .form-group {
	position: relative;
	margin-bottom: 10px;
	min-height: 40px;
}

.styleEditor .form-group > input {
	float: right;
	width: 42%;
	text-overflow: ellipsis;
}

.styleEditor .form-group > .btn-group.select {
	float: right;
	width: 42%;
}

.styleEditor .form-group > .btn-group.select > .btn {
	width: 100%;
}

.styleEditor .form-group > .btn-group.select .dropdown-menu {
	right: 0px;
	left: auto;
}

.styleEditor .form-group > .sp-replacer {
	float: right;
	width: 42%;
	border: 2px solid #bdc3c7;
	height: 35px;
	background:...