JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Use the letters (visible) -->

<div class="letters yellow">THIS IS MY BEAUTIFUL TYPEFACE...!</div>

<div class="letters pink">AND NOW THIS IS ANOTHER PLACE I CAN TYPE...</div>

<div class="letters green">WOW?!</div>

<!-- Define the letters (invisible) -->

<div class="letter-definition" data-character=" ">
    <div class="space"></div>
</div>

<div class="letter-definition" data-character="A">
    <div class="A">
        <div class="lines-A">
            <div class="left"></div>
            <div class="middle"></div>
            <div class="right"></div>
        </div>
    </div>
</div>

<div class="letter-definition" data-character="B">
    <div class="B">
        <div class="lines-B">
            <div class="left"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </div>
</div>

<div class="letter-definition" data-character="C">
    <div class="C">
        <div class="lines-C">
            <div class="middle"></div>
        </div>
    </div>
</div>


<div class="letter-definition" data-character="D">
    <div class="D">
        <div class="lines-D">
            <div class="left"></div>
            <div class="middle"></div>
        </div>
    </div>
</div>

<div class="letter-definition" data-character="E">
    <div class="E">
        <div class="lines-E">
            <div class="left"></div>
            <div class="top"></div>
            <div class="middle"></div>
            <div class="bottom"></div>
        </div>
    </div>
</div>

<div class="letter-definition" data-character="F">
    <div class="F">
        <div class="lines-F">
            <div class="left"></div>
            <div class="top"></div>
            <div class="middle"></div>
        </div>
    </div>
</div>

<div class="letter-definition" data-character="G">
    <div class="G">
        <div class="lines-G">
            <div class="middle"></div>
            <div class="right"></div>
            <div class="top"></div>
        </div>
 ...

CSS

.letter-definition {
	display: none;
}

.yellow { background: yellow; }
.pink { background: pink; }
.green { background: green; }

.letter {
	height: 220px;
	display: inline-block;
	margin: 8px;
}

.space {
	width: 112px;
	height: 220px;
}


.A {
	width: 112px;
	position: relative;
}

.lines-A {
	background-image: url("A.png");
	background-size: 100%;
	width: 112px;
	height: 220px;
}

.A .left
{
	width: 15px;
	height: 220px;
	background-color: black;
	position: absolute;
	transform: skew(-11deg,0);
	left: 22px;

}

.A .middle
{
	width: 62px;
	height: 15px;
	background-color: black;
	position: absolute;
	top: 143px;
	left: 27px;
}

.A .right
{
	width: 15px;
	height: 220px;
	background-color: black;
	position: absolute;
	transform: skew(11deg,0);
	right: 22px;
}

.B {
	width: 112px;
	position: relative;
}

.lines-B {
	background-image: url("B.png");
	background-size: 100%;
	width: 112px;
	height: 220px;
}

.B .left {
	width: 15px;
	height: 220px;
	background-color: black;
	position: absolute;
}

.B .top{
	position: absolute;
	width: 98px;
	height: 129px;
	border-color: black;
	border-style: solid;
	border-width: 15px 15px 15px 0;
	border-radius: 0 180% 220% 0 /0 180% 180% 0;
}

.B .bottom {
	position: absolute;
	top: 144px;
	width: 97px;
	height: 46px;
	border-color: black;
	border-style: solid;
	border-width: 15px 15px 15px 0;
	border-radius: 0 240% 180% 0 /0 180% 180% 0;
}

.C {
	width: 112px;
	position: relative;
}

.lines-C {
	background-image: url("C-G.png");
	background-size: 100%;
	width: 112px;
	height: 220px;
}

.C .middle {
	position:absolute;
	content:'';
	top:0;
	right:0;
	width:97px;
	height:190px;
	border-width: 15px 0 15px 15px;
	border-color:#000000;
	border-style:solid;
	border-bottom-left-radius: 50%;
	border-top-left-radius: 50%;
}

.D {
	width: 112px;
	position: relative;
}

.lines-D {
	background-image: url("D.png");
	background-size: 100%;
	width: 112px;
	height: 220px;
}

.D .left {
	width: 15px;
	height: 220px;
	background-color:...

JavaScript

$('.letters').each(function() {

  var $letterWrapper = $(this);
  var letters = $letterWrapper.html().split('');
  var letterArray = [];

  for (i = 0; i < letters.length; i++) {
    console.log(letters[i]);

    var character = letters[i];
    var chracterDefinition = $('.letter-definition[data-character="' + character + '"]').html();
    var characterHTML = '<div class="letter" data-character="' + character + '">' + chracterDefinition + '</div>';
    
    letterArray.push(characterHTML);
  };

  $letterWrapper.html(letterArray);

});