JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<div class="toolbar">
<div class="nav">
<a class="close" href="#"> </a>
<a class="minimize" href="#"> </a>
<a class="expand" href="#"> </a>
</div>
Mac Toolbar in Pure CSS
</div>
CSS
body{padding:50px;background:#eee}
#content{
background: #eeeeee;
background: -webkit-radial-gradient(165px 80px, cover, #FFFFFF 0%, #eeeeee 75%);
background: -moz-radial-gradient(165px 80px, cover, #FFFFFF 0%, #eeeeee 75%);
background: -ms-radial-gradient(165px 80px, cover, #FFFFFF 0%, #eeeeee 75%);
background: -o-radial-gradient(165px 80px, cover, #FFFFFF 0%, #eeeeee 75%);
background: radial-gradient(165px 80px, cover, #FFFFFF 0%, #eeeeee 75%);
grad
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.65) inset;
-moz-box-shadow: 0 0 0 2px rgba(255,255,255,0.65) inset;
box-shadow: 0 0 0 2px rgba(255,255,255,0.65) inset);
border: solid 2px #d9d9d9;
position: relative;
-webkit-transition: border-color 0.175s linear;
-moz-transition: border-color 0.175s linear;
transition: border-color 0.175s linear;
display: block;
}
.toolbar {
margin: 8px;
overflow:hidden;
background:#CFCFCF;
background-color:#cfcfcf;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#cfcfcf),to(#a8a8a8));
background-image:-webkit-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-moz-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-ms-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-o-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:linear-gradient(top,#cfcfcf,#a8a8a8);
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
position:relative;
overflow:hidden;
font:14px/26px 'lucinda grande',Helvetica,Arial;
text-align:center;
padding:1px 0 0 68px;
height:26px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.toolbar,
.toolbar* {
color:#111;
text-shadow:0...