JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<header>
  <div class="wrap">
    <div class="menu">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div class="text">
      <h1>Brooke Journalist</h1>
      <button class="btn">Contact</button>
    </div>
  </div>
</header>
<section id="about">

</section>

CSS

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

h1 {
  margin: 0;
}

.wrap {
  margin: 0 auto;
  width: 750px;
  height: 100%;
}

header {
  background: url("https://placehold.it/1500x600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
}

.text {
  text-align: center;
  position: relative;
  top: 50%;
}

.menu {
  padding-top: 30px;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 3px;
  background-color: #262626;
  margin: 6px 0;
}

.btn {
  border: 1px solid aqua;
  background: transparent;
  font-size: 25px;
  color: white;
  outline: none;
}

#about {
  height: 300px;
  width: 100%;
}