JSFiddle - React, Tailwind, and code Playground

HTML

<table class="lugares">
              <tr>
                <td class="seat-avaliable"><div></div></td>
                <td class="seat-avaliable"><div></div></td>
                <td class="seat-avaliable"><div></div></td>
                <td class="seat-avaliable"><div></div></td>
                <td class="seat-not-avaliable"><div></div></td>
                <td class="seat-badvis"><div></div></td>
                <td class="seat-avaliable"><div></div></td>
              </tr>
 
            </table>

CSS

.seat-avaliable div,
.seat-not-avaliable div,
.seat-badvis div{
    height: 12px !important;
    width: 12px !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
}

.seat-selected div{
	height: 12px !important;
    width: 12px !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
	background: #ffc720;
	border: #5e6461 solid 1px;	
	}

.seat-avaliable div {
    background: #05cd7a;
}
.seat-not-avaliable div {
    background: #000;
    border: 1px solid #333333;
}


.seat-badvis div::before {
	background: #5e6461;
  width: 8px;
 margin-right: 12px;
  border: #000 solid 1px;
  border-right: none;
  -webkit-border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-bottomleft: 2px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  top: 0;
}
seat-badvis div::after{
  background: white;
  width: 6px;
  margin-right: 5px;
  border: #000 solid 1px;
  border-left: none;
  top: 0px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.lugares td{
	padding:2px!important;
	}