JSFiddle - React, Tailwind, and code Playground

HTML

<div class="maketable">
    <div class="intra">
      <div class="tit">Intranet</div>
      <div class="hover" id="01">29.90€</div>
      <div class="hover borl" id="02">59.90€</div>
      <div class="hover borl" id="03">409.90€</div>
      <div class="hover borl" id="04">2009.90€</div>
    </div>
    <div class="intra caisse">
    <div class="tit bort">Pack Intranet+Caisse</div>
      <div class="hover bort" id="05">29.90€</div>
      <div class="hover bortl" id="06">29.90€</div>
      <div class="hover bortl" id="07">29.90€</div>
      <div class="hover bortl" id="08">29.90€</div>
    </div>
    <div class="intra web">
    <div class="tit bort">Pack Intranet+Web</div>
      <div class="hover bort" id="09">29.90€</div>
      <div class="hover bortl" id="10">29.90€</div>
      <div class="hover bortl" id="11">29.90€</div>
      <div class="hover bortl" id="12">29.90€</div>
    </div>
    <div class="intra caisse web">
    <div class="intra"><div class="tit bort">Pack Intranet+Caisse+Web</div>
      <div class="hover bort" id="13">29.90€</div>
      <div class="hover bortl" id="14">29.90€</div>
      <div class="hover bortl" id="15">29.90€</div>
      <div class="hover bortl" id="16">29.90€</div>
    </div>
</div>

CSS

body{
  background-color: lightblue;
}


/*--------------------------*/
.maketable{
  font-size: 7px;
  width:90%;
  margin: 20px auto 17px auto !important;
	border-radius : 6px;
	overflow: hidden;
	border: 1px solid gray;
}
.intra{
    display: table;
    table-layout: fixed;
    width:100%;
    line-height: 15px;
}
.tit{
	background-color: rgba(63, 191 , 76, 0.25);
  width: 90px;
}
.hover{
  display: table-cell;
  background-color: rgba(255, 255 , 255, 0.6);
	cursor: pointer;
  width:auto;
}
.hover{
	text-align:center;
}
/*
width:90px;
width: calc(100% - 90px);
*/


/*.bortl{
	border-top: 1px solid gray;
	border-left: 1px solid gray;
}
.bort{
	border-top: 1px solid gray;
}
.borl{
	border-left: 1px solid gray;
}*/