JSFiddle - React, Tailwind, and code Playground

by jupiterjackrabbit

HTML

<table class="brad responsive">
  <thead class="brad">
	  <tr class="brad">
		  <th class="brad" scope="col">Name</th>
		  <th scope="col">Vorname</th>
		  <th scope="col">Straße</th>
      <th scope="col"><abbr title="Postleitzahl">PLZ</abbr></th>
		  <th scope="col">Ort</th>
	  </tr>
  </thead>
<tr>
	<td data-label="Name">Shannon</td>
	<td data-label="Vorname">Cheyenne</td>
	<td data-label="Straße">Ap #239-2170 Phasellus Av.</td>
	<td data-label="PLZ">94075</td>
	<td data-label="Ort">Berlin</td>
</tr>
<tr>
	<td data-label="Name">Lindsey</td>
	<td data-label="Vorname">Tanner</td>
	<td data-label="Straße">511-635 Malesuada Rd.</td>
	<td data-label="PLZ">77791</td>
	<td data-label="Ort">Beaconsfield</td>
</tr>
<tr>
	<td data-label="Name">Luna</td>
	<td data-label="Vorname">Xanthus</td>
	<td data-label="Straße">771-4058 Et Rd.</td>
	<td data-label="PLZ">61855</td>
	<td data-label="Ort">Pontypridd</td>
</tr>
<tr>
	<td data-label="Name">Donaldson</td>
	<td data-label="Vorname">Anika</td>
	<td data-label="Straße">2821 Orci. Road</td>
	<td data-label="PLZ">71078</td>
	<td data-label="Ort">Oosterhout</td>
</tr>
<tr>
	<td data-label="Name">Langley</td>
	<td data-label="Vorname">Bruce</td>
	<td data-label="Straße">Ap #376-2978 Diam. Avenue</td>
	<td data-label="PLZ">05691</td>
	<td data-label="Ort">Ravenstein</td>
</tr>

<tr>
	<td data-label="Name">Leon</td>
	<td data-label="Vorname">Petra</td>
	<td data-label="Straße">776-8330 Sem St.</td>
	<td data-label="PLZ">72540</td>
	<td data-label="Ort">Cervinara</td>
</tr>
<tr>
	<td data-label="Name">Everett</td>
	<td data-label="Vorname">Ulla</td>
	<td data-label="Straße">P.O. Box 786, 1462 Id, St.</td>
	<td data-label="PLZ">06815</td>
	<td data-label="Ort">Banff</td>
</tr>
<tr>
	<td data-label="Name">Bishop</td>
	<td data-label="Vorname">Wayne</td>
	<td data-label="Straße">Ap #619-6021 Aliquet, Road</td>
	<td data-label="PLZ">47719</td>
	<td data-label="Ort">Saint-Mard</td>
</tr>

</table>

CSS

/* basic styling */
table {
  width: 100%;
}
.brad{
      border-radius:20px;
}
tr:nth-child(odd) {
  background-color: #4fc3a1;
      border-radius:20px;

}
thead{
      border-radius:20px;

}
td {
  padding: 0.25em 0.5em;
}

@media (max-width: 500px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    overflow: hidden;

  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
      border-radius:20px;

  }

  tr:nth-child(odd) td {
    border-bottom: 1px solid #E6E4E4;
  }

  td {
    display: flex;
    border-bottom: 1px solid #E6E4E4;
        border-radius:20px;

  }
  td:before {
    content: attr(data-label) ": ";
    flex: 0 0 5em;
    font-weight: bold;
    margin-right: 1em;
    margin-bottom: 0.25em;
        border-radius:20px;

  }
}
/* defaults */
*,
*::before,
*::after {
  box-sizing: inherit;
      border-radius:20px;

}

html {
      border-radius:20px;

  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}