JSFiddle - React, Tailwind, and code Playground

by raj_mutant

HTML

<div class="bg-img">
    <div class="content">
      <div class="children">
        <h1>Random Quote Generator</h1>
        <p>Press the button below for an inspirational quote!</p>
        <div class="btn">Click Me Bro!</div>
      </div>
    </div>
  </div>

CSS

body{
  margin: 0;
  padding: 0;
}
h1{
  margin: 0;
  font-size: 50px;
}
.btn{
  border: 4px solid #079992;
  padding: 2px 15px;
  color: #079992;
  font-size: 1.5em;
  font-weight: 800;
  display: inline-block;
}
.btn:hover{
  background-color: #38ada9;
  cursor: pointer;
}
.content{
  display: flex;
  background-color: #b2bec3;
  text-align: center;
  height: 100vh;
  width:100%;
  font-family: helvetica;
  justify-content:center;
  align-items:center;
}