JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<script src="https://use.fontawesome.com/9fef70aece.js"></script>
<header>
  <div class="overhead">
    <div class="icon">
      <div class="icon-row">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
      <div class="icon-row">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
      <div class="icon-row">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>      
    </div>
    <h1>
    Office 365
    </h1>
    <h1>
    Outlook
    </h1>
  </div>
</header>

<div class="side-menu">
    <input type="text" name="usrname" placeholder="Search Mail and People">
</div>
  
<div class="header-menu">
<ul>
<li><a href=""><i class="fa fa-plus-square-o" aria-hidden="true"></i>New</a></li>
<li><a href=""><i class="fa fa-trash" aria-hidden="true"></i>Delete</a></li>
<li><a href=""><i class="fa fa-archive" aria-hidden="true"></i>Archive</a></li>
<li><a href="">Junk</a></li>
<li><a href="">Sweep</a></li>
<li><a href="">Move to<i class="fa fa-sort-desc" aria-hidden="true"></i></a></li>
<li><a href="">Categories<i class="fa fa-sort-desc" aria-hidden="true"></i></a></li>
<li><a href="">...</a></li>
</ul>
</div>

CSS

header{
  
}

.overhead{
  min-height: 50px;
  background-color: black;
}

.icon{
  float: left;
  background-color: #32b1f0;
  width: 50px;
  height: 50px;
}

.overhead h1{
    color: white;
    float: left;
    height: 50px;
    margin-top: 8px;
    padding: 0 15px;
}

.overhead h1:first-of-type{
  border-right: 1px solid white;
}

.side-menu{
  background-color: #cccccc;
  width: 180px;
}

.side-menu input{
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 100%;
}

.header-menu{
  display: inline-block;
  background-color: #ebebeb;
  min-height: 35px;
  width: 100%;
  overflow: none;
}

.header-menu a{
  color: black;
}
.header-menu li{
  float: left;
  height: 100%;
  list-style-type: none;
  padding: 2px 5px;
}

.header-menu li:hover{
  background-color: #defbff;
}

.header-menu ul{
  margin: 0px;
  padding: 0px;
  list-display: none;
}

JavaScript

/*3:31 PM*/