JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> 
    <i class="circle movie"></i>Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> 
    <i class="circle music"></i>Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> 
    <i class="circle books"></i>Books</label>
  </div>
</fieldset>

CSS

.checkbox {
  position: relative;
}
.circle {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
}
.movie {
  background-color: red;
 }

.music {
  background-color: blue;
}

.books {
  background-color: green;
}