JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="choices">
   <div class="choice selected correct selected">
     <div class="points one">
        +1
     </div>
     <div class="points zero">
       +0
     </div>
   </div>
   
   <div class="choice correct not-selected">
     <div class="points one">
        +1
     </div>
     <div class="points zero">
       +0
     </div>
   </div>
   
   <div class="choice selected incorrect selected">
     <div class="points one">
        +1
     </div>
     <div class="points zero">
       +0
     </div>
   </div>
   
   
   <div class="choice selected correct selected">
     <div class="points one">
        +1
     </div>
     <div class="points zero">
       +0
     </div>
   </div>
   
   
   <div class="choice selected incorrect selected">
     <div class="points one">
        +1
     </div>
     <div class="points zero">
       +0
     </div>
   </div>
   
</div>

CSS

.choice {
  display: block;
  height: 40px;
  border: 1px solid black;
}

.points {
  display: none;
  float: right;
  font-size: 20px;
  margin-right: 5px;
}
.choice.correct {
  background: green; 
}
.choice.correct.selected .points.one  {
  display: block;
}
.choice.correct.not-selected .points.zero {
  display: block;
}