JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id ="searchfield">
  <div id="main-search-fields">
  <div class="selects-container">
  <p>Quality:</p>
  <select name="quality">
  <option value="all">All</option>
  <option value="720p">720p</option>
  <option value="1080p">1080p</option>
  <option value="3D">3D</option>
  </select>
  </div>
  <div class="selects-container">
  <p>Genre:</p>
  <select name="genre">
  <option value="all">All</option>
  <option value="action">Action</option>
  <option value="adventure">Adventure</option>
  <option value="animation">Animation</option>
  <option value="biography">Biography</option>
  <option value="comedy">Comedy</option>
  <option value="crime">Crime</option>
  <option value="documentary">Documentary</option>

  </select>
  </div>
  <div class="selects-container">
  <p>Rating:</p>
  <select name="rating">
  <option value="0">All</option>
  <option value="9">9+</option>
  <option value="8">8+</option>
  <option value="7">7+</option>
  <option value="6">6+</option>
  <option value="5">5+</option>
  <option value="4">4+</option>
  <option value="3">3+</option>
  <option value="2">2+</option>
  <option value="1">1+</option>
  </select>
  </div>
  <div class="selects-container" class="selects-container-last">
  <p>Order By:</p>
  <select name="order_by">
  <option value="latest">Latest</option>
  <option value="oldest">Oldest</option>
  <option value="year">Year</option>
  <option value="rating">Rating</option>
  <option value="likes">Likes</option>
  <option value="alphabetical">Alphabetical</option>
  </select>

  </div>
  <input type="button" id="browsepagebutton" value="search"  />
  </div>
</div>

CSS

#browsepagebutton {

  background: #6ac045;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  display:inline-block;
  font-weight: bold;
  color: #fff;
  height: 42px;
  font-size: 16px;
  position: relative;
  width: 130px;
  padding: 7px 0;
  margin-top: 20px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}

.selects-container {
  display: inline-block;

}

.selects-container select {
margin: 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
width: 130px;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-appearance: none;
box-sizing: border-box;
height: 40px;
color: #a2a2a2;
font-size: .9em;
font-weight: normal;
overflow: hidden;
background-color:#282828;
border: 0;
}

#main-search-fields {
    padding-top: 66px;
    background-color:red;
}

JavaScript

saveTask: function(name, isCompleted) {
    window.localStorage.setItem(name, isCompleted);
  },
  renderTasks: function() {
    for (var i = 0; i < window.localStorage.length; i++) {
      var taskName = window.localStorage.key(i);
      var isCompleted = window.localStorage.getItem(taskName) == "true";
      var taskHTML = Todo.template.replace("<!-- TASK_NAME -->", taskName);

      if (!isCompleted) {
        Todo.container.insertAdjacentHTML('afterbegin', taskHTML);
      }
    }
  }