JSFiddle - React, Tailwind, and code Playground

by Chelo Quilón

HTML

<header class="web-header">
  <h1 class="web-title">AMAZON</h1>

  <div class="flex-user">
    <a href="">LOGIN</a>
    <a href="">REGISTRO</a>
  </div>

  <input class="search" type="search" placeholder="Buscar" autocomplete="off">

  <nav class="navbar flex-menu">
    <a href="#">C1</a>
    <a href="#c2">C2</a>
    <a href="#c3">C3</a>
    <a href="#c4">C4</a>
  </nav>

</header>

CSS

.flex-menu, .flex-user{
  display: flex;
  background-color: #dddddd;
}
.flex-menu{
  list-style-type: none;
  padding: 0;
  margin:0;
  flex-direction: row;
  justify-content: center;      
}
.flex-menu a{
  padding: 0 10px;
  flex-grow:1;
  text-align:center;
}
.flex-user{
  direction: rtl;
}
.flex-user a{
  padding: 10px;
}
.search{
  width: 100%;
  padding: 10px 20px;
  margin: 10px 0;
}