JSFiddle - React, Tailwind, and code Playground

by mrjordy

CSS

/* ----------------------------------- ugh */
.container {
    width: calc(100% - 16px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px;}
.break20 {display: block; height: 20px;}
.break40 {display: block; height: 40px;}
.break60 {display: block; height: 60px;}

.shift4 {padding-left: 4px;}
.shift8 {padding-left: 8px;}
.shift12 {padding-left: 12px;}
.shift16 {padding-left: 16px;}

.fContainer {
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}
.fItem {
    padding: 5px;
    margin: 0;
    align-self: center;
    align-items: flex-start;
}

.center {
    justify-content: center;
    align-items: center;
    margin: auto;
}

.centerText {
    text-align: center;
}

.centerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
}

.y100 {height: 100%;}
.y80 {height: 80%;}
.y75 {height: 75%;}
.y50 {height: 50%;}
.y33 {height: 33.3%;}
.y25 {height: 25%;}
.y20 {height: 20%;}
.y17 {height: 16.6%;}
.y10 {height: 10%;}

.x100 {width: calc(100% - 20px);}
.x90 {width: calc(90% - 20px);}
.x80 {width: calc(80% - 20px);}
.x75 {width: calc(75% - 20px);}
.x70 {width: calc(70% - 20px);}
.x50 {width: calc(50% - 20px);}
.x33 {width: calc(33.3% - 20px);}
.x30 {width: calc(30% - 20px);}
.x25 {width: calc(25% - 20px);}
.x20 {width: calc(20% - 20px);}
.x17 {width: calc(16.6% - 20px);}
.x10 {width: calc(10% - 20px);}
.x12 {width: calc(12% - 20px);}
.x5 {width: calc(5% - 20px);}

/* ----------------------------------- object design */

.cardSelect {
  box-shadow: 0px 0px 15px rgba(50,50,80,.2);
  margin: 40px 20px 20px 20px;
  padding: 20px;
  border-radius: 4px;
  transition: .2s;
  cursor: pointer;
  background: white;
}
.cardSelect:hover {
  transform:...