JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="blackBackground">black</div>
<div class="blackOutline">black</div>
<div class="blackText">black</div>

<div class="linebreak"></div>

<div class="navyBackground">navy</div>
<div class="navyOutline">navy</div>
<div class="navyText">navy</div>

<div class="linebreak"></div>

<div class="greyBackground">grey</div>
<div class="greyOutline">grey</div>
<div class="greyText">grey</div>

<div class="linebreak"></div>

<div class="lightgreyBackground">lightgrey</div>
<div class="lightgreyOutline">lightgrey</div>
<div class="lightgreyText">lightgrey</div>

<div class="linebreak"></div>

<div class="lightergreyBackground">lightergrey</div>
<div class="lightergreyOutline">lightergrey</div>
<div class="lightergreyText">lightergrey</div>

<div class="linebreak"></div>

<div class="blueBackground">blue</div>
<div class="blueOutline">blue</div>
<div class="blueText">blue</div>

<div class="linebreak"></div>

<div class="lightblueBackground">lightblue</div>
<div class="lightblueOutline">lightblue</div>
<div class="lightblueText">lightblue</div>

<div class="linebreak"></div>

<div class="tealBackground">teal</div>
<div class="tealOutline">teal</div>
<div class="tealText">teal</div>

<div class="linebreak"></div>

<div class="lighttealBackground">lightteal</div>
<div class="lighttealOutline">lightteal</div>
<div class="lighttealText">lightteal</div>

<div class="linebreak"></div>

<div class="orangeBackground">orange</div>
<div class="orangeOutline">orange</div>
<div class="orangeText">orange</div>

<div class="linebreak"></div>

<div class="lightorangeBackground">lightorange</div>
<div class="lightorangeOutline">lightorange</div>
<div class="lightorangeText">lightorange</div>

<div class="linebreak"></div>

<div class="redBackground">red</div>
<div class="redOutline">red</div>
<div class="redText">red</div>

<div class="linebreak"></div>

<div class="lightredBackground">lightred</div>
<div class="lightredOutline">lightred</div>
<div class="lightredText">lightred</div>

CSS

/* display junk */

div {
  display: inline-block;
  margin: 20px;
  text-align: center;
  width: 100px;
  height: 100px;
  font-size: 16px;
  line-height: 100px;
  border-radius: 50px;
  font-family: 'Roboto', sans-serif;
  text-shadow: 0px 0px 5px white;
}

.linebreak {
  display: block;
  height: 0px;
  width: 450px;
  border-bottom: 2px solid #ddd;
  margin: 20px 20px 20px 0;
}

/* real stuff */

.centerObj {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    
}
button.solid {
    background: linear-gradient(#3775d8, #3775d8);
    padding: 10px 40px;
    min-width: 160px;
    color: white !important;
    font-size: 14px !important;
    font-family: "Roboto", sans-serif !important;
    font-weight: bold !important;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    box-shadow: 6px 6px 15px rgba(40, 40, 80, .2);
    transition: .3s;
    display: block;
    margin: 20px !important;
}

button.solid:hover {
  background: linear-gradient(#3365b4, #2e548b);
}

button.solid:active {
  border: none;
  animation: buttonPop 0.3s;
  outline: none;
}
button.blueback:visited, button:focus {
  outline: none;
}
button.solid:visited::after {
  content: '\2713';
  position: absolute;
  bottom: 0;
  right: 3px;
  font-size: 8px;
}

button.solid.disabled {
    background: #f7f8fa;
    color: #001B2E !important;
    cursor: not-allowed;
    border: 2px solid #edf2f4;
    box-shadow: none;
    transition: 0.3s;
}
button.solid.disabled:hover {
  border: 2px solid #FDEDEF;
}

button.solid.disabled:active {
  animation: none;
}

button.outline {
    background: white;
    color: #3775d8;
    border: 2px solid #3775d8;
    box-shadow: 6px 6px 15px rgba(40, 40, 80, 0);
    padding: 8px 38px;
    min-width: 156px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    transition: 0.3s;
    display: block;
    margin:...