JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
    <span class="logo">LOGO</span>
    <div class="menu">
      <a href="#">Home</a>
      <a href="#">Cats</a>
      <a href="#">Dogs</a>
      <a href="#">Help</a>
      <a href="#">Documentaion</a>
    </div>
    <span class="user">kantoraix</span>
  </header>
  <div class="filter">
    <span>Filter</span>
    <input type="edit">
    <input type="edit">
    <input type="edit">

    <div>
      <input type="radio" id="radio1" name="radio" value="Radio 1">
      <label for="radio1">Radio1</label>
    </div>
    <div>
      <input type="radio" id="radio2" name="radio" value="Radio 2">
      <label for="radio2">Radio2</label>
    </div>
    <div class="space"></div>
    <div>
      <input type="checkbox" id="check1" name="check1" value="Check 1">
      <label for="check1">checkbox</label>
    </div>
    <div>
      <input type="checkbox" id="check2" name="check2" value="Check 2">
      <label for="check2">checkbox</label>
    </div>
    <div class="space"></div>
    <div>
      <input type="range" id="range1" name="" value="">
    </div>
    <div>
      <input type="range" id="range2" name="" value="">
    </div>
  </div>
  <div class="goods">
    <div class="rowGoods">
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
    </div>
    <div class="rowGoods">
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
      <div class="goodItem">
      </div>
    </div>
  </div>
</body>

</html>

CSS

body {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
}

header {
  display: block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  padding: 10px;
  margin-bottom: 25px;
}

.logo {
  display: inline-block;
  width: 10%;
  text-align: left;
}

.menu {
  display: inline-block;
  width: 78%;
  text-align: center;
}

.user {
  display: inline-block;
  width: 10%;
  text-align: right;
}

.menu a {
  margin-right: 25px;
}

.filter {
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  padding: 10px;
  height: 400px;
}

.filter span {
  margin-left: 5px;
  margin-bottom: 25px;
}

.filter input[type="edit"] {
  display: block;
  margin: 5px;
}

.filter input[type="radio"] {
  display: inline-block;
  margin-bottom: 5px;
}

.space {
  margin-top: 20px;
}

.goods {
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  padding: 10px;
  margin-left: 35px;
}

.rowGoods {
  display: block;
}

.goodItem {
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: 50px;
  height: 150px;
}