JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	<ul class="ul_header">
		<li><a href="index.html">Один</a></li>
		<li><a href="index.html">Два</a></li>
		<li><a href="index.html">Три</a></li>
		<li><a href="index.html">Четыре</a></li>
	</ul>
	
		<div style="float:right; margin-top: 15px; height:30px; border: 1px solid #0088cc; border-radius: 3px;"><a href="index.html">Регистрация</a></div>
<ul class="ul_header_right">
		<div style="float:right;"><li><a href="index.html">Вход</a></li></div>
	</ul>
</div>

CSS

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family:'Open Sans', sans-serif;
}

a{
  color: #0088cc;
  text-decoration: none;
}
a:visited {
color: #0088cc; /* Цвет посещенных ссылок */
text-decoration: none;
}

a:hover {
color: #0088cc;
text-decoration: underline;;
}

h1 {
  margin: 0;
  padding: 40px;
  font-weight: 400;
  color: #4c5d6e;
}



#header{
background-color: #fff;
position: fixed;
width: 100%;
font-size: 15px;
font-weight: 400;
height: 60px;
line-height: 60px;
border-bottom: solid 4px black;
}

.ul_header{
margin:0;
padding-left: 300px;
float: left;
}

.ul_header li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}

.ul_header_right{
  margin:0;
  float: right;
}

.ul_header_right li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}