JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="header">

<a href="#"><div class="menu"><div class="burg"></div></div></a>

<div class="logo"><a href="#"><span class="t1">21</span> <span class="t2">PINE NUTS</span></a></div>

</div>

<div class="main">hello</div>

CSS

body {margin:0px;}

.header {border:solid #eee;border-width:0 0 1px 0;padding:10px;margin:0 0 20px 0;

-webkit-box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.75);}

.menu {border:6px solid #000;background-color:#fff;width:17px;border-radius:4px;float:right;margin:3px 0 0 0;}
.burg {border:solid #000;border-width:4px 0;height:3px;margin:3px 0;}

.logo {font-family:arial;font-weight:bold;}

.t1 {display:inline-block;color:#fff;background-color:#000;width:35px;height:35px;border-radius:100%;text-align:center;font-size:19px;text-indent:2px;line-height:35px;vertical-align:middle;}

.t2 {color:#000;display:inline-block;font-size:21px;height:35px;line-height:35px;vertical-align:middle;}

.logo a {text-decoration:none;}

.main {max-width:900px; margin:auto; padding:0 10px;}