JSFiddle - React, Tailwind, and code Playground

by Nikita Polevoy

HTML

<table>
  <tr>
    <td rowspan="4" class="text no-bottom">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
      Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </td>
    <td class="c00"></td>
    <td class="c10"></td>
    <td rowspan="4" class="bubble">
      <div>
        text
      </div>
     </td>
  </tr>
  <tr>
    <td class="c01"></td>
    <td class="c11"></td>
  </tr>
  <tr>
    <td class="c02 only-right-border"></td>
    <td class="c12 only-left-border"></td>
  </tr>
  <tr>
    <td class="c03 only-right-border"></td>
    <td class="c13 only-left-border"></td>
  </tr>
  <tr>
    <td rowspan="4" class="text no-top">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
      Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </td>
    <td class="c00 only-right-border"></td>
    <td class="c10 only-left-border"></td>
    <td rowspan="4" class="bubble">text</td>
  </tr>
  <tr>
    <td class="c01 only-right-border"></td>
    <td class="c11 only-left-border"></td>
  </tr>
  <tr>
    <td class="c02"></td>
    <td class="c12"></td>
  </tr>
  <tr>
    <td class="c03"></td>
    <td class="c13"></td>
  </tr>
  <tr>
    <td rowspan="4" class="text">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
      Some text Some text Some text Some text Some text Some text...

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #ff000030;
}

.text {
  background: #00FF0050;
}

.bubble {
  border-style: none;
  vertical-align: middle;
  text-align: left;
  width: 20%;
}

.c00,
.c10,
.c01,
.c11,
.c02,
.c12,
.c03,
.c13 {
  border-color: blue;
  width: 6px;
}

.c00,
.c10,
.c03,
.c13 {
  height: 5px;
}

.c00 {
  border-style: none none solid none;
}

.c10 {
  border-style: none;
}

.c01 {
  border-style: solid solid none none;
}

.c11 {
  border-style: none none solid solid;
}

.c02 {
  border-style: none solid solid none;
}

.c12 {
  border-style: solid none none solid;
}

.c03 {
  border-style: solid none none none;
}

.c13 {
  border-style: none;
}

.no-bottom {
  border-bottom-style: none;
}

.no-top {
  border-top-style: none;
}

.only-right-border {
  border-style: solid solid none none;
  border-top-color: transparent;
}

.only-left-border {
  border-style: solid none none solid;
  border-top-color: transparent;
}

div {
  width: 100%;
}