JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<!-- add icon link -->
<link rel="icon" href="./MAblueIcon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
<style>
@charset "UTF-8";
/* #row1,#row2 {
display: none;
} */
.tab-label {
/* display: flex;
justify-content: space-between;
padding: 1em; */
background: #b9ce44;
font-weight: bold;
/* cursor: pointer; */
/* Icon */
}
/* .tab-label:hover {
background: #1a252f;
} */
/* .tab-label::after {
content: "❯";
width: 1em;
height: 1em;
text-align: center;
transition: all 0.35s;
} */
.tab-content {
overflow: hidden;
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
transition: all 0.35s;
}
/* input:checked ~ .tab-label {
background: #1a252f;
} */
/* input:checked ~ .tab-label::after {
transform: rotate(90deg);
} */
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
</style>
</head>
<body style="margin: 0;padding: 0;min-width: 100%;width: 100%;
max-width: 100%; min-height: 100%; height: 100%;max-height: 100%; background: rgb(231, 207, 192);
min-height: 100vh;">
<div id="page-wrap" style="margin: 50px;background: cornflowerblue;">
<h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>
<table role="presentation" style="width: 100%;border-collapse: collapse;">
<thead>
<tr>
<th rowspan="2" colspan="1"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color:...