JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content">
<table id="groups">
<thead>
<tr>
<th class="groupes">Groupes</th>
<th class="action add" title="Ajouter un nouveau groupe">+</th>
</tr>
</thead>
<tbody>
<tr id="new-group-tr" style="display: none;">
<td>
<input type="text" id="new-group-name">
</td>
<td class="action add" title="Valider la création du groupe">V</td>
<td class="action cancel" title="Annuler">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « Aucun »">
<td class="groupes">Aucun</td>
<td class="action delete" title="Supprimer le groupe « Aucun »">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « BDES_Banque_Laydernaud »">
<td class="groupes">Group1</td>
<td class="action delete" title="Supprimer le groupe « BDES_Banque_Laydernaud »">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « Groupe_1 »">
<td class="groupes">Group2</td>
<td class="action delete" title="Supprimer le groupe « Groupe_1 »">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « New »">
<td class="groupes">Group3</td>
<td class="action delete" title="Supprimer le groupe « New »">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « Test »">
<td class="groupes">Group4</td>
<td class="action delete" title="Supprimer le groupe « Test »">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « Test 2 »">
<td class="groupes">Group4</td>
<td class="action delete" title="Supprimer le groupe « Test 2 »">X</td>
</tr>
<tr title="Cliquer pour afficher le contenu du groupe « Test 3 »">
<td class="groupes">Group5</td>
<td class="action delete" title="Supprimer le groupe « Test 3 »">X</td>
</tr>
<tr title="Cliquer pour afficher le...
CSS
table {
border-collapse: collapse;
font-size: 1em;
}
th {
background-color: #a0a0d8;
font-weight: bold;
width: 20em;
}
th,
td {
border: 1px solid #8080b8;
padding: 2px;
}
th.action,
td.action {
background: transparent;
border: none;
width: 1em;
}