JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="student">
  <p><b>ФИО:</b> Пупкин А. В.</p>
  <p>
    <label>Контрольная 1</label>
    <input type="checkbox" class="test1">
    <label>Контрольная 2</label>
    <input type="checkbox" class="test2">
    <span class="result"></span>
  </p>
</div>
<div class="student">
  <p><b>ФИО:</b> Васин А. Б.</p>
  <p>
    <label>Контрольная 1</label>
    <input type="checkbox" class="test1">
    <label>Контрольная 2</label>
    <input type="checkbox" class="test2">
    <span class="result"></span>
  </p>
</div>
<div class="student">
  <p><b>ФИО:</b> Петров Ю. И.</p>
  <p>
    <label>Контрольная 1</label>
    <input type="checkbox" class="test1">
    <label>Контрольная 2</label>
    <input type="checkbox" class="test2">
    <span class="result"></span>
  </p>
</div>

CSS

.student{
  width:400px;
  margin:auto;
  padding:10px;
  border-bottom:1px solid #333;
}
.result{
  display:block;
  padding-top:20px;
}
.result:after{
  content: 'Не зачтено';
}
.result:before{
  content:'Результат: ';
  font-weight:bold;
}
.test1:checked + label + .test2:checked + .result:after{
  content: 'Зачет';
}