JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">Acme</span> Web Design</h1>
        </div>
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li class="current"><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <section id="newsletter">
      <div class= "container">
        <h1>Subscribe To Our Newsletter</h1>
        <form>
          <input type="email" placeholder="Enter Email...">
          <button type="submit" class="button_1">Subscribe</button>
        </form>
      </div>
    </section>

    <section id="main">
      <div class="container">
        <article id="main-col">
          <h1 class="page-title">About Us</h1>
          <p>Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam.</p>
          <p>Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.</p>
        </article>
        <aside id="sidebar">
          <div class="dark">
            <h3>What We Do</h3>
            <p>Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae.</p>
          </div>
        </aside>
      </div>
   ...

CSS

/* global*/
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

ul {
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.button_1 {
  height: 38px;
  background: #e8491d;
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
}

.dark {
  padding: 15px;
  background: #35424a;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #35424a;
  border-radius: 15px;
}

/*header*/
header {
  background: #35424a;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
}

header li {
  float:left;
  display: inline;
  padding: 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight, header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}

/*showcase*/
#showcase {
  min-height: 400px;
  background: url('../img/showcase.jpg') no-repeat 0 -400px;
  text-align: center;
  color: #ffffff;
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

#showcase p {
  font-size: 20px;
}

/*newsletter*/
#newsletter {
  padding: 15px;
  color: #ffffff;
  background: #35424a;
}

#newsletter h1 {
  float:left;
}

#newsletter form {
  float: right;
  margin-top: 15px;
}

#newsletter input[type="email"] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

/*boxes*/
#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  width: 30%;
  padding: 20px;
  text-align: center;
}

#boxes .box img{
  width: 90px;
}

/*footer*/
footer {
  padding: 10px;
  margin-top: 20px;
  background: #e8491d;
  text-align: center;
  color: #ffffff;
}

/*about */
#sidebar {
  float: right;
 ...