JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500"></script>
<div class="wide color">
  <div class="normal">
    <div class="s50 left stars">&starf; &starf; &starf; &starf; &starf;</div>
    <div class="s50 left">
      <h1>Rank higher effortlessly.</h1>
      <p>Effortless Reviews is a review generation tool for small businesses.</p>
    </div>
  </div>
</div>
<div class="normal">

</div>

SCSS

* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  background-color: white;
}
p {
  line-height: 1.5rem;
}
.color {
  //background: linear-gradient(158deg, purple, indianred);;
  //color: white;
}
.normal {
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  padding: 30px;
}
.stars {
  color: gold;
  font-size: 3rem;
  margin-top: 30px;
}
.text-center { text-align: center; }
.left { float: left; }
.right { float: right; }
.s50 { width: 50% }