JSFiddle - React, Tailwind, and code Playground

by lakshmipriya001

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-1 dash-margin">
    <div class="d-rec" id="rec">Recruiter<br> Verified</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="c-rec" id="rec">Candidate<br>  Verified</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="l-rec" id="rec">Litehires <br>  Verified</div>
  </div>
</div>

CSS

.l-rec{

	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    margin-bottom: 15px;
    height: 34.2px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.dash-margin{
	margin-right: 15px;
}

JavaScript

$(document).ready(function() {

  $('.d-rec,.l-rec').click(function(e) {
    $(this).toggleClass('highlight');
  });

  $('.c-rec').click(function(e) {
    if ($(this).hasClass('highlight'))
      $('.d-rec').removeClass('highlight');
    else
      $('.d-rec').addClass('highlight');
    $(this).toggleClass('highlight');
  });

});