JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<div style='width: 300px;'>
  <div class='grc'>
    <b class='e'><b><strong></strong></b><i><strong></strong></i><u></u><s></s><span></span></b>
    <div>Здесь применено углубленное двойное сглаживание.
      <br/>Вес кода 1 130 Kb.</div>
    <b class='e'><span></span><s></s><u></u><i><strong></strong></i><b><strong></strong></b></b>
  </div>
</div>

CSS

.grc {
  padding: 5px 15px;
}

.grc .e {
  display: block;
  position: relative;
}

.grc .e * {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 2;
  font-size: 0px;
}

.grc b.e b,
.grc b.e i,
.grc b.e u,
.grc b.e s,
.grc b.e span,
.grc b.e strong {
  height: 1px !important;
  background: #1d5198;
}

.grc b.e b,
.grc b.e i,
.grc b.e s {
  border-left: 1px solid #f1f4f9;
  border-right: 1px solid #f1f4f9;
}

.grc b.e u,
.grc b.e b strong,
.grc b.e i strong,
.grc b.e span {
  border-left: 1px solid #9eb4d3;
  border-right: 1px solid #9eb4d3;
}

.grc b.e b {
  margin: 0 3px;
}

.grc b.e i {
  margin: 0 1px;
}

.grc b.e u {
  margin: 0 1px;
}

.grc b.e s {
  margin: 0;
}

.grc b.e b strong,
.grc b.e i strong {
  margin: 0;
}

.grc b.e span {
  margin: 0;
}

.grc div {
  background: #1d5198;
  padding: 0 10px;
  color: white;
}