JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item cp sp cf bb" id="launDroid">
    <a class="bgRed">
      <div class="content">
      <h2>Laundroid</h2>
      <p>Laundry That Does Itself</p>
      <div class="tileFooter">Category</div>
        <input type="checkbox" name="blue" value=".cp" id="cehcekc"/>
        <label for="blue">Couch Potato</label>
      </div>
    </a>
  </div>

CSS

.item {
  width: 300px;
  height: 300px;
  margin: 0px;
  float: left;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.item a{
  height: 100%;
  width: 100%;
  position: absolute;
}

.item:hover a.bgRed{
	background-color: rgba(232,43, 71, 0.9);	
}

JavaScript

$(document).ready(function() {
  $('#cehcekc').click(function() {
    if($('#cehcekc').prop('checked')) {
      $('.bgRed').css('background-color','#000');
    } else {
    	$('.bgRed').css('background-color','#fff');
    }
  });
});