JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class='fContainer y100'>
<button class="solid" onclick="window.location.href='/nccs_ppm?id=form&table=pm_project&sys_id=-1&view=portal'">Create Project</button>
<button class="solid" onclick="window.location.href='/project_status_list.do?sysparm_query=project.project_managerDYNAMIC90d1921e5f510100a9ad2572f2b477fe&sysparm_first_row=1&sysparm_view='">Create Status Report</button>
<button class="solid" onclick="window.location.href='/sn_safe_$safe_board.do#/teamBacklog'">SAFE Board</button>
<button class="solid" onclick="window.location.href='/sn_safe_story_list.do?sysparm_query=assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe&sysparm_first_row=1&sysparm_view=safe'">My User Stories</button>
</div>
<div class="break40">

</div>
<div class="fContainer">
<div class="fItem x30 center cardSelect ">
  <div class="fItem x5"></div>
  <div class="fItem x20">
  <span class="h5">My Projects</span>
  <p>Active Projects</p>
<div class="greySectionBorders"></div>
<div class="break5"></div>
<div class="break10"></div>
<span class="mText"><span>Recent Projects</span></span>
<div class="break10"></div>
<span class="mText"><span>Green</span></span>
<div class="break10"></div>
<span class="mText"><span>Yellow</span></span>
<div class="break10"></div>
<span class="mText"><span>Red</span></span>
</div>
</div>
<div class="fItem x30 center cardSelect ">
  <div class="fItem x5"></div>
  <div class="fItem x20">
  <span class="h5">Status Reports</span>
  <p>Reports</p>
  <div class="greySectionBorders"></div>
<div class="break5"></div>
<div class="break10"></div>
<span class="mText"><span>Recent Reports</span></span>
<div class="break10"></div>
<span class="mText"><span>##</span></span>
<div class="break10"></div>
<span class="mText"><span>##</span></span>
<div class="break10"></div>
<span class="mText"><span>##</span></span>
</div>
</div>
<div class="fItem x30 center cardSelect ">
  <div class="fItem x5"></div>
  <div class="fItem x20">
  <span class="h5">Blank Card Title</span>
 ...

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:...