JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<h1>
    <r></r><e></e><d></d><space></space><l></l><o></o><v></v><e></e>
</h1>

<h2>
    <i></i><n></n><space></space><c></c><s></s><s></s>
</h2>

CSS

h1 {
    font-size: .5em;
    color: red;
}

h2 {
    font-size: .333em;
    color: #707070;    
}

l, o, v, e, d, r, c, s, p, n, i {
    display: inline-block;
    border: solid;
    margin: 0 .25em;
}

space {
    display: inline-block;
    width: 1.25em;
}

l {
    border-radius: 50% / 999%;
    width: 1em;
    height: 1em;
    border: 0 solid transparent;
    border-left-color: inherit;
    border-width: 0 7em 10em 2em;
    margin-right: -7em;
}

o {
    border-radius: 100% / 1000%;
    border-width: 2em;
    width: 1em;
    height: 7em;
}

v {
    border-radius: 0 0 100% 0;
    border-width: 2em;
    border-top-color: transparent;
    width: 1em;
    height: 7em;
}

e {
    position: relative;
    border-radius: 9999% 0 0 2000%;
    border-width: 2em 0 2em 2em;
    border-right-color: transparent;
    border-bottom-color: transparent;
    width: 1em;
    height: 7em;
}

e:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2em;
    top: 1em;
    bottom: 1em;
    color: inherit;
    box-shadow: inset 0 0 0 9999em;
}

v + e {
    margin-left: -.5em;
}

d {
    border-radius: 0 9999% 100% 0;
    border-width: 2em;
    border-top-color: transparent;
    width: 1em;
    height: 7em;
}

r {
    border-radius: 0 9999% 100% 0;
    border-width: 2em;
    border-right-color: transparent;
    width: 0;
    height: 7em;
}

c {
    border-radius: 0 100% 0 9999%;
    border-width: 2em 0 5em 1em;
    border-right-color: transparent;
    width: 3em;
    height: 4em;
}

s {
    border-radius: 0 100% 9999% 0;
    border-width: 2em 2em 5em 0;
    border-right-color: transparent;
    width: 2em;
    height: 4em;
}

p {
    border-radius: 100% 9999% 0 0;
    border-width: 2em 2em 5em;
    border-right-color: transparent;
    border-bottom-color: transparent;
    width: 2em;
    height: 4em;
}

a {
    border-radius: 0 9999% 0 100%;
    border-width: 7em 1em 0 1em;
    border-right-color: rgba(0, 0, 0, 0);
    width: 1em;
    height: 4em;
}

n {
   ...