JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<table>
  <tr>
    <td>001</td>
    <td class="active">001</td>
    <td>001</td>
    <td>001</td>
  </tr>
  <tr>
    <td>002</td>
    <td class="active">002</td>
    <td>002</td>
    <td>002</td>
  </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
td {
  padding: 10px;
}
table tr:nth-child(2) td {
  background: #e4e4e4;
}
table tr:nth-child(1) td.active {
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 10px 2px #999;
}
table tr:nth-child(2) td.active {
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 8px 2px #999;
  
  position: relative;
  z-index: 2;
}