JSFiddle - React, Tailwind, and code Playground

by nevkatz

HTML

<h2>Rubric for Reading Aloud</h2>
<div id="rubric">
        <div class="cell empty">
       </div>
        <div class="cell level begins">
          <span>Begins</span>
         </div>
  
         <div class="cell level approaches">
           <span>Approaches</span>
         </div>
  
         <div class="cell level meets">
           <span>Meets</span>
         </div>
       
        <div class="cell level exceeds">
          <span>Exceeds</span>
        </div>
       <div class="cell skill">
          <label>
          Pronunciation
          </label>
        </div>
        <div class="cell">  
          
          <!-- end header, start first row -->
          
            <input type="radio" id="radio-1" name="row1"/>
          <label for="radio-1" class="begins">Few or no words are pronounced correctly.</label>
        </div>
       <div class="cell">
            <input type="radio" id="radio-2" name="row1"/>
         <label for="radio-2" class="approaches">Some words are pronounced correctly.</label>
       </div>

  
        <div class="cell">
          <input type="radio" id="radio-3" name="row1"/>
          <label for="radio-3" class="meets">Most words are pronounced correctly.</label>
        </div>
  
       <div class="cell">
         <input type="radio" id="radio-4" name="row1"/>
         <label for="radio-4" class="exceeds">All words are pronounced correctly.</label>
       </div>
  
    <!-- end row 1, start row 2 -->
    <div class="cell skill">
          <label>
           Fluency
          </label>
        </div>
  

  
    <div class="cell">
          <input type="radio" id="radio-5" name="row2"/>
          <label for="radio-5" class="begins">Struggles to read</label>
        </div>
  
       <div class="cell">
         <input type="radio" id="radio-6" name="row2"/>
         <label for="radio-6" class="approaches">Reads word for word</label>
       </div>
  
     <div class="cell">
          <input type="radio" id="radio-7" name="row2"/>
     ...

CSS

body {
  font-family: Calibri;
  background-color: lightgrey;
}
h2 {
  text-align: center;
  font-size: 1.5em;
}
#rubric {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 2fr;
  max-width: 650px;
  width: 100%;

  margin: 0px auto;
  grid-gap: 5px;
}

input {
  display: none;
}
.cell {
  display: flex;
}

label {
  background-color: #fff;
  display: block;
  width: 100%;
  padding: 10px;
  transition: 0.2s ease;
}

.cell span {
  padding: 10px;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.cell.level {
  color: white;
  text-align: center;
}
.cell.skill label {
  background-color: #3e3d3e;
  color: white;
}

.cell.level.begins {
  background-color: #ec7852;
}

.cell.level.approaches {
  background-color: #a13c81;
}

.cell.level.meets {
   background-color: #4ca897; 
}

.cell.level.exceeds {
  background-color: #35759a;
}

.cell:not(.skill) label {
  cursor: pointer;
}

label.begins {
  border-left: 2px solid #ec7852;
}
label.approaches {
  border-left: 2px solid #a13c81;
}
label.meets {
  border-left: 2px solid #4ca897;
}
label.exceeds {
  border-left: 2px solid #35759a;
}
 input:checked ~ label.begins {
    background-color: #ebcfb6;
}
 input:checked ~ label.approaches {
    background-color: #dfb8d4
}
 input:checked ~ label.meets {
    background-color: #c3e6dd;
}
 input:checked ~ label.exceeds {
    background-color: #d8eaf4
}
@media screen and (max-width:768px) {
  #rubric {
    width: 100%;
  }
}