JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>
  <div id="menu-handheld">
    <a href="page.php?stuff=things" id="menu-handheld-tab-start">Start</a>
    <a href="page.php?stuff=things" id="menu-handheld-tab-trends">Trends</a>
    <a href="page.php?stuff=things" id="menu-handheld-tab-recent">Neueste</a>
  </div>

  <div id="header">
    <h1>TremeClothing</h1>
    <form id="search" action="page.php?stuff=things">
      <input type="text" name="search" autocomplete="off" spellcheck="false" />
    </form>
  </div>
  
  <!-- rest of page -->
</body>

<!-- input maxlength="2048" name="q" autocomplete="off" type="text" spellcheck="false" -->

CSS

body {
  margin: 0;
  padding: 0;
  background-color: rgb(240, 240, 240);
  font-size: 20pt;
}

#header {
  width: 100%;
  padding: 0.5rem 1rem 1rem 1rem;
  background-color: rgb(0, 51, 51);
  position: relative;
  box-sizing: border-box;
  text-align: center;
}

#header h1 {
  display: inline;
  margin: 0;
  padding: 0;
  color: rgb(102, 153, 153);
  font-size: 3rem;
}

#search {
  display: inline-block;
  height: 3rem;
  width: 16rem;
  margin: 1rem 3rem 0 3rem;
}

#search input {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 3rem;
  box-sizing: border-box;
  background: rgb(102, 153, 153) no-repeat 0.5rem 0.5rem/2rem url(img/icons/search.svg);
  color: rgb(0, 51, 51);
  font-size: 1.5rem;
  font-weight: bold;
  border: none;
  border-radius: 2rem;
}

#search input:focus {
  outline: none;
}

#menu-handheld {
  position: fixed;
  width: 100%;
  height: 3.8rem;
  background-color: rgb(0, 51, 51);
  bottom: 0;
  z-index: 100;
}

#menu-handheld a,
#menu-handheld a:visited {
  display: block;
  float: left;
  box-sizing: border-box;
  width: 33.33333%;
  height: 100%;
  padding-top: 2.5rem;
  color: rgb(102, 153, 153);
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  transition: background-image, background-color 0.3s ease;
}

#menu-handheld-tab-start {
  background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/start-light.svg);
}

#menu-handheld-tab-trends {
  background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/trends-light.svg);
}

#menu-handheld-tab-recent {
  background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/recent-light.svg);
}

#menu-handheld a:active,
#menu-handheld a:hover {
  color: rgb(0, 51, 51);
}

#menu-handheld-tab-start:active,
#menu-handheld-tab-start:hover {
  background: rgb(102, 153, 153) no-repeat 50% 0.5rem/2rem url(img/icons/start-dark.svg);
}

#menu-handheld-tab-trends:active,
#menu-handheld-tab-trends:hover {
  background: rgb(102, 153, 153)...