JSFiddle - React, Tailwind, and code Playground

by Corentin Ballot

HTML

<div class="dsg_table">
  <div class="dsg_table-header">
    <div class="dsg_table-item -dsg_spacer"></div>
    <div class="dsg_table-item">Tiers</div>
    <div class="dsg_table-item">Tiers&nbsp;+</div>
    <div class="dsg_table-item">Tous risques</div>
    <div class="dsg_table-item">Tous risques&nbsp;+</div>
    <div class="dsg_table-item">Leasing</div>
  </div>
  <div class="dsg_table-subheader">Principales garanties</div>
  <div class="dsg_table-row">
    <div class="dsg_table-item -dsg_header">Responsabilité civile Défense Pénale et Recours suite à accident Protection du conducteur maxi 400 000 € </div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
  </div>
  <div class="dsg_table-row">
    <div class="dsg_table-item -dsg_header">Bris de glaces et catastrophes</div>
    <div class="dsg_table-item" aria-label="non"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
  </div>
  <div class="dsg_table-row">
    <div class="dsg_table-item -dsg_header">Vol, incendies et événements naturels</div>
    <div class="dsg_table-item" aria-label="non"></div>
    <div class="dsg_table-item" aria-label="option"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
    <div class="dsg_table-item" aria-label="oui"></div>
  </div>
  <div class="dsg_table-row">
    <div class="dsg_table-item -dsg_header">Dommages tous accidents dont vandalisme</div>
    <div class="dsg_table-item" aria-label="non"></div>
    <div class="dsg_table-item" aria-label="non"></div>
    <div class="dsg_table-item"...

CSS

.dsg_table {
  position: relative;
}

.dsg_table-header,
.dsg_table-row {
  display: flex;
  flex-wrap: nowrap;
}

.dsg_table-row {
  color: #545454;
  font-family: "Source Sans Pro";
  font-size: 16px;
}

.dsg_table-item {
  width: calc(100% / 7);
  text-align: center;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.dsg_table-item.-dsg_spacer {
  opacity: 0 !important;
  width: calc(100% / 7 * 2);
}

.dsg_table-item.-dsg_header {
  text-align: left;
  width: calc(100% / 7 * 2);
  justify-content: start;
}

.dsg_table-header .dsg_table-item {
  font-weight: bold;
  font-family: "Montserrat";
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.dsg_table-header .dsg_table-item:last-of-type {
  border-right: none;
}

.dsg_table-row .dsg_table-item {
  border-left: 1px solid #B8B8CC;
  border-bottom: 1px solid #B8B8CC;
}

.dsg_table-row .dsg_table-item:last-of-type {
  border-right: 1px solid #B8B8CC;
}

.dsg_table-item[aria-label="oui"]::before {
  content: "v";
  height: 24px;
  width: 24px;
  background-image: url("/static/Particuliers/rcwb/assets/img/pictos/ui-check-green.svg");
}

.dsg_table-item[aria-label="non"]::before {
  content: "x";
  height: 24px;
  width: 24px;
  background-image: url("/static/Particuliers/rcwb/assets/img/pictos/ui-uncheck.svg");
}

.dsg_table-item[aria-label="option"]::before {
  content: "Option";
}

.dsg_table-header .dsg_table-item {
  background-color: #010035;
  color: white;
}

.dsg_table-subheader {
  width: 100%;
  text-align: center;
  background-color: #D7D6DF;
  padding: 8px 0;
  color: #545454;
  font-family: "Source Sans Pro";
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #D7D6DF;
  box-sizing: border-box;
}

@media only screen and (max-width: 1023px) {
  .dsg_table-header {
    font-size: 14px;
    position: sticky;
    top: 0;
  }

  .dsg_table-subheader {
    position: sticky;
    top: 50px;
  }

  .dsg_table-row {
   ...