JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ground">
  <div class="line">
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
  </div>
</div>

CSS

.ground {
  width: 390px;
  height: 575px;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAxgDGAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD49bqCD1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//Z);
  border: 1px solid white;
}

.line {
  padding: 10px
}

.active {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  background: gray;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

.nonactive {
  width: 30px;
  height: 30px;
  opacity: 1.0;
  background: lime;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

JavaScript

$('#def, #mid').click(function() {
  $(this).toggleClass('nonactive');
});