JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel"><p>
  <div class="cadre-choice width-b-3 bg-car" id="tab-1">Car</div>
  <div class="cadre-choice width-b-3 bg-avion" id="tab-2">Avion</div>
  <div class="cadre-choice width-b-3 bg-autres" id="tab-3">Autres</div>
  <div class="clear"></div>
 
  <div class="cadre-content">
    Test du contenu Car
  </div>
  <div class="cadre-content">
    Test du contenu Avion
  </div>
  <div class="cadre-content">
    Test du contenu Autres
  </div>
</p></div>

CSS

.clear { clear:both; }

div.panel { padding: 0; background-color: transparent; max-height: 0; transition: max-height 0.4s ease-out; }
div.panel .cadre-choice { float: left; background: rgba(250, 250, 250, 0.5); font-size: 16px; margin: 0 10px; padding: 40px; text-align: center; }
div.panel .cadre-choice:hover { background-color: rgba(250, 250, 250, 0.9); }
div.panel .cadre-choice .title { background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; }
.cadre-content { background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; margin: 20px 0 10px 0; }
.width-b-2 { width: calc(50% - 100px); }
.width-b-3 { width: calc(33% - 100px); }