JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<ul>
<li class="exer-li">Who <input type="text" class="exer-input pastsimple-e1" data-answer="was"> (be) Marylin Monroe?</li><div class="circle"></div>
<div class="circle"></div><li class="exer-li">My grandmother <input type="text" class="exer-input pastsimple-e1" data-answer="had"> (have) two sisters and brother.</li>
<div class="circle"></div><li class="exer-li">My grandmother <input type="text" class="exer-input pastsimple-e1" data-answer="had"> (have) two sisters and brother.</li>
<div class="circle"></div><li class="exer-li">My grandmother <input type="text" class="exer-input pastsimple-e1" data-answer="had"> (have) two sisters and brother.</li>
</ul>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #20262e;
  color: white;
}

/*main*/

.inline-block {
  display: inline-block;
}

.circle{
  height: 22px;
  width: 22px;
  background-color: white; 

  margin: 10px;
  border-radius: 100%;
}

li {

  font-weight: bold;
}

.bold {
  font-weight: 600;
}

.normal {
  font-weight: 400;
}

.exer-li {
  padding: 8px;
}

.exer-input {
  font-size: 16px;
  color: black;
  padding: 5px;
  background: #f2f2f2;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  width: 100px;
  text-align: center;
}