JSFiddle - React, Tailwind, and code Playground

by Anton Pudikov

HTML

<header class="headwrap">

  <nav class="navbar">
    <ul class="clearfix">
      <li>ABOUT US</li>
      <li>GALLERY</li>
      <li>EVENTS</li>
      <li>BLOG</li>
      <li>CONTACTS</li>
    </ul>
  </nav>
  
</header>

CSS

* {
  box-sizing: border-box;
}

body {
	background:gray;
	/*border: 2px solid yellow;*/
}

.headwrap {
	width: 93%;
	height: auto;
	margin: auto;
	padding-top: 70px;
}

.navbar {
	margin-top: 40px;
	width: 100%;
	background: #db3636;
}

.navbar ul {
	list-style: none;
	margin: 0;
	padding: 15px; 
}

.navbar ul li {
  /* float it to have no issues with whitespace between inline-blocks */
	float: left;
	padding: 15px;
  /* borders from both sides */
	border-right: 1px solid black;
  border-left: 1px solid black;
	color: white;
  font-size: 14px;
	font-weight: bold;
	font-family: sans-serif;
  
  text-align: center;
  /* total width 100% / 5 elements */
  width: 20%;
}

/* No left border for the first one */
.navbar ul li:first-child {
  border-left: none;
}

/* No right border for the last one */
.navbar ul li:last-child {
  border-right: none;
}

/* http://stackoverflow.com/questions/14973317/understanding-bootstraps-clearfix-class */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
  clear: both;
}