JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item cp sp cf bb" id="launDroid">
    <a href="" class="bgRed">
      <div class="content">
      <h2>Laundroid</h2>
      <p>Laundry That Does Itself</p>
      <div class="tileFooter">Category</div>
      </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);	
}