JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

<div class="bar">
  <div class="bar_row">
  <div class="l"> 
    <p class="h">Not ready to book? Stay in the loop with updates and offers.</p>
    <p class="pp">By clicking the button 'Get Offers', you agree to our <a>privacy policy.</a></p>
  </div>
  
  <div class="r">
    <form action="">
    <input type="text" placeholder="Your email address">
    <button class="b">GET OFFERS</button>
    </form>
  </div>
  </div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  outline: none;
}

body,
button {
  -webkit-font-smoothing: antialiased;
}

.bar {
  background-color: #01ab6e;
  color: #fff;
  overflow: hidden;
  padding: 1.8em;
  font-family: Lato;
  font-size: 13px;
  word-spacing: .7px;
}

.bar_row {
  max-width: 1000px;
  margin: auto;
}

.l,
.r {
  float: left;
  width: 50%;
}

.l {
  padding-right: .9em;
}

.h {
  color: #0b140f;
  font-weight: 900;
  margin-bottom: .4em;
  font-size: 1.25em;
}

.pp {
  font-size: .92em;
}

a {
  font-weight: 900;
  border-bottom: 1px solid;
  cursor: pointer;
}

form {
  overflow: hidden;
}

input,
.b {
  float: left;
  width: 49%;
  padding: .8em;
}

::placeholder {
  color: #999;
}

input {
}

.b {
  background-color: #0d0d0d;
  color: #fff;
  margin-left: 2%;
  letter-spacing: 1.2px;
  word-spacing: 1px;
  font-weight: 700;
  cursor: pointer;
}