JSFiddle - React, Tailwind, and code Playground
by Town
HTML
<!doctype html>
<html>
<head>
<style type="text/css">
.bottom-line {
border-bottom: 1px solid black;
vertical-align: bottom;
}
html,body {
height: 100%;
padding: 0px;
margin: 0px;
}
table,td,tr {
border-width: 0px;
padding: 0px;
margin: 0px;
border-collapse: collapse;
}
.tag-border {
padding: 3px;
margin: 0px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
.first-last-child-nodes {
border-left: 1px solid transparent;
padding: 0px;
margin: 0;
border-collapse: collapse;
}
.not-first-last-child-nodes {
border-left: 1px solid black;
padding: 0px;
margin: 0;
border-collapse: collapse;
}
.same-height {
height: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<td class="bottom-line same-height">
<div class="tag-border">This is my table!</div>
</td>
<td class="bottom-line"> </td>
<td rowspan="2">
<table>
<tr>
<td>
<table>
<tr>
<td class="bottom-line same-height first-last-child-nodes">
<div class="tag-border">This is my table! test123</div>
</td>
...