JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<table id="q-graph">
  <caption>Quarterly Overview</caption>
  <tbody>
    <tr class="qtr" id="q1">
      <th scope="row">Q1</th>
      <td class="blue bar percentage-35">
      </td>
      <td class="pink bar percentage-28">
      </td>
    </tr>
    <tr class="qtr" id="q2">
      <th scope="row">Q2</th>
      <td class="blue bar percentage-76">
      </td>
      <td class="pink bar percentage-66">
      </td>
    </tr>
    <tr class="qtr" id="q3">
      <th scope="row">Q3</th>
      <td class="blue bar percentage-80">
      </td>
      <td class="pink bar percentage-70">
      </td>
    </tr>
    <tr class="qtr" id="q4">
      <th scope="row">Q4</th>
      <td class="blue bar percentage-50">
      </td>
      <td class="pink bar percentage-60">
      </td>
    </tr>
  </tbody>
</table>

<div id="ticks">
  <div class="tick">
    <p>$50,000</p>
  </div>
  <div class="tick">
    <p>$40,000</p>
  </div>
  <div class="tick">
    <p>$30,000</p>
  </div>
  <div class="tick">
    <p>$20,000</p>
  </div>
  <div class="tick">
    <p>$10,000</p>
  </div>
</div>

SCSS

body, html {
  height: 100%;
}

body {
  display: flex;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#q-graph {
  display: block;
  position: relative; 
  width: 600px; 
  height: 300px;
  margin: 1.1em 0 0; 
  padding: 0;
  background: transparent;
  font-size: 11px;
}

#q-graph caption {
  caption-side: top; 
  width: 600px;
  text-transform: uppercase;
  letter-spacing: .5px;
  top: -40px;
  position: relative; 
  z-index: 10;
  font-weight: bold;
}

#q-graph tr, #q-graph th, #q-graph td { 
  position: absolute;
  bottom: 0; 
  width: 150px; 
  z-index: 2;
  margin: 0; 
  padding: 0;
  text-align: center;
}

#q-graph td {
  transition: all .3s ease;
  
  &:hover {
    background-color: desaturate(#85144b, 100);
    opacity: .9;
    color: white;
  }
}
  
#q-graph thead tr {
  left: 100%; 
  top: 50%; 
  bottom: auto;
  margin: -2.5em 0 0 5em;
}

#q-graph tbody tr {
  height: 296px;
  padding-top: 2px;
  border-right: 1px dotted #C4C4C4; 
  color: #AAA;
}

#q-graph #q1 {
  left: 0;
}

#q-graph #q2 {
  left: 150px;
}

#q-graph #q3 {
  left: 300px;
}

#q-graph #q4 {
  left: 450px; 
  border-right: none;
}

#q-graph tbody th {
  bottom: -1.75em; 
  vertical-align: top;
  font-weight: normal; 
  color: #333;
}

#q-graph .bar {
  width: 60px; 
  border: 1px solid; 
  border-bottom: none; 
  color: #000;
}

#q-graph .bar p {
  margin: 5px 0 0; 
  padding: 0;
  opacity: .4;
}

#q-graph .blue {
  left: 13px; 
  background-color: #2A91CF;
  border-color: transparent;
}

#q-graph .pink {
  left: 77px; 
  background-color: #F29494;
  border-color: transparent;
}


#ticks {
  position: relative; 
  top: -300px; 
  left: 2px;
  width: 596px; 
  height: 300px; 
  z-index: 1;
  margin-bottom: -300px;
  font-size: 10px;
}

#ticks .tick {
  position: relative; 
  border-bottom: 1px dotted #C4C4C4; 
  width: 600px;
  height: 60px;
}

#ticks .tick p {
  position: absolute; 
  left:...