JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<div id="main">
  <div id="badge">
    <h1><small>$</small>20<span>/ mo</span></h1>
    <button>Sign Up</button>
    <p>Get access to our premium service for only $20 /mo.</p>
  </div>
  <h2>Additional Information</h2>
  <ul>
    <li>Product Specification</li>
    <li>Materials</li>
    <li>Download PDF Catalogue</li>
    <li>Size Chart</li>
    <li>How to Install</li>
  </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:300,400,600,700);

html, body {
  margin: 0;
  padding: 0;
  background: #f2f2f2;
}

body {
  padding: 10px;
}

#main {
  width: 404px;
  height: 600px;
  background: white;
  position: relative;
  left: 50%;
  margin-left: -202px;
  padding: 12px;
  box-sizing: border-box;
}

#badge {
  width: 380px;
  background: #e1e1e1;
  border-radius: 10px;
  font-family: Helvetica, Arial, sans-serif;
  padding: 100px 5px 5px 216px;
  box-sizing: border-box;
  position: relative;
  color: #555;
}

#main h1 {
  font-size: 162px;
  font-weight: 600;
  letter-spacing: -0.04em;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 17px;
  left: 17px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
}

#main h1 small {
  font-size: 30px;
  letter-spacing: normal;
  vertical-align: text-top;
  position: relative;
  top: 30px;
}

#main h1 span {
  font-size: 22px;
  letter-spacing: normal;
  vertical-align: text-top;
  position: relative;
  top: 40px;
  left: 16px;
}

#main button {
  width: 135px;
  height: 43px;
  border: none;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 19px;
  text-shadow: 1px 1px 1px white;
  color: black;
  font-weight: 800;
  text-align: center;
  border-radius: 4px;
  background: #bad229 none;
  background: -webkit-linear-gradient(top,  #bad229 0%,#91bd00 50%,#74ad00 51%,#97c900 100%);
  background: -moz-linear-gradient(top,  #bad229 0%, #91bd00 50%, #74ad00 51%, #97c900 100%);
  background: -ms-linear-gradient(top,  #bad229 0%,#91bd00 50%,#74ad00 51%,#97c900 100%);
  background: linear-gradient(to bottom,  #bad229 0%,#91bd00 50%,#74ad00 51%,#97c900 100%);
}

#main p {
  font-size: 14px;
  line-height: 20px;
  margin: 26px 16px 26px 0;
}

#main h2 {
  font-size: 26px;
  font-weight: normal;
  padding: 0;
  margin: 35px 0;
  color: black;
  font-family: Helvetica, Arial, sans-serif;
}

#main ul {
  list-style: none;
  margin: 0;
  padding: 4px 10px 18px;
 ...