JSFiddle - React, Tailwind, and code Playground

by marco_rensch

HTML

<div>
  <table>
    <thead>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
      <th>Spalte 3</th>
      <th>Link</th>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum sit.</td>
        <td>Lorem dolor sit.</td>
        <td>Lorem ipsum dolor.</td>
        <td><a href="#">Link</a></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum sit.</td>
        <td>Lorem ipsum dolor sit.</td>
        <td><a href="#">Link</a></td>
      </tr>
      <tr>
        <td>Lorem dolor sit.</td>
        <td>Lorem ipsu.</td>
        <td>ipsum dolor sit.</td>
        <td><a href="#">Link</a></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit.</td>
        <td>ipsum sit.</td>
        <td>Lorem ipsum sit.</td>
        <td><a href="#">Link</a></td>
      </tr>
    </tbody>
  </table>
</div>

CSS

body{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: #e7e7e7;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1645544541389-95cd732682bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1550&q=80");
  background-size: cover;
}
div{
  padding: 20px;
  width: 950px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  /* Nur von Chrome unterstützt aktuell: */
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255, 0.4);
}

/* Table styling */
table{
  width: 100%;
  font-family: sans-serif;
  border-collapse: collapse;  /* nötig damit wir border definieren können !! */
}

tr{
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
td {
  padding: 8px;
}

/* Stufe drei, das Styling mit definierten Kind-Elementen */

tr td:last-of-type a{
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 5px 20px;
  font-size: 0.8em;
  color: #fff;
  background: #1f2227;
  border-radius: 4px;
  transition: all ease-in-out 200ms;  /*weiche übergänge */
}

tr td:last-of-type a:hover{
  background: #888;
  transition: all ease-in-out 200ms; /*weiche übergänge */
}

tr:nth-child(even) {
  background-color: rgba(255,255,255, 0.5);
}

JavaScript

table