JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<div class="race-container">
  <h3>
    Lehigh County Common Pleas Judge
    <span class="race-info">(10 yrs. 1 seat)</span>
  </h3>
  <div class="race-tbl">
    <div class="race-tbl-hd">Candidate</div>
    <div class="race-tbl-hd col-span-2">votes</div>
    <div>Ehrlich, William A.</div>
    <div>1,348</div>
    <div>
      <svg class="chart" width="100%" height="19" role="img">
        <g class="bar">
          <rect width="100%" height="19" class="bar-background"></rect>
          <rect width="7.9%" height="19" class="bar-percent"></rect>
        </g>
      </svg>
    </div>
    <div>7.9%</div>
    <div>Santiago, Rashid</div>
    <div>3,306</div>
    <div>
      <svg class="chart" width="100%" height="19" role="img">
        <g class="bar">
          <rect width="100%" height="19" class="bar-background"></rect>
          <rect width="19.4%" height="19" class="bar-percent"></rect>
        </g>
      </svg>
    </div>
    <div>19.4%</div>
    <div>Capehart, Tom</div>
    <div>999</div>
    <div>
      <svg class="chart" width="100%" height="19" role="img">
        <g class="bar">
          <rect width="100%" height="19" class="bar-background"></rect>
          <rect width="5.9%" height="19" class="bar-percent"></rect>
        </g>
      </svg>
    </div>
    <div>5.9%</div>
  </div>
</div>

SCSS

.race-container {
  h3 {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: bold;
  }
  
  span {
    font-style: italic;
    font-weight: normal;
  }
}

.race-tbl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.race-tbl {
  font-family: Open Sans;
  font-size: 16px;
}

.race-tbl-hd {
  border: 0;
  color: #aaa;
  font-size: 13px;
  text-transform: uppercase;
}

.col-span-2 {
  grid-column: 2 / 5;
}

.bar-background {
  fill: #e6e6e6;
}

.bar-percent {
  fill: #006699;
}

.race-tbl > div {
  border-bottom: #aaa solid 1px;
}