JSFiddle - React, Tailwind, and code Playground

HTML

<div class="global">
  <div class="menu">
    <label for="abis">Абиссинская</label>
    <label for="brit">Британская</label>
    <label for="rus">Русская голубая</label>
    <label for="siam">Сиамская</label>
  </div>
  <div class="cats">
    <input type="checkbox" id="abis">
    <input type="checkbox" id="brit">
    <input type="checkbox" id="rus">
    <input type="checkbox" id="siam">
    <span class="abis"></span>
    <span class="rus"></span>
    <span class="abis"></span>
    <span class="brit"></span>
    <span class="brit"></span>
    <span class="siam"></span>
    <span class="rus"></span>
    <span class="siam"></span>
    <span class="siam"></span>
    <span class="rus"></span>
  </div>
</div>

CSS

.global {
    display: flex;
    justify-content: space-around;
}
.menu{
    display: flex;
    width: 250px;
    flex-wrap: wrap; 
    background: gray;
    align-content: flex-start;  
}
.menu label{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 25px;
    border-bottom: white 1px solid; 
}
.cats{
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    justify-content: space-around;
}
.cats input{
  margin:0;
  padding:0;
  width:0;
  height:0;
  border:0;
  position:absolute;
  opacity:0;
}
.cats span{
  display:inline-block;
  margin:1% 1%;
  width:30%;
  padding-top:30%;
  background:#bbb;
}
.cats input#abis:checked~span.abis{
  opacity:0.5;
}
.cats input#brit:checked~span.brit{
  opacity:0.5;
}
.cats input#rus:checked~span.rus{
  opacity:0.5;
}
.cats input#siam:checked~span.siam{
  opacity:0.5;
}