JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Anton|Architects+Daughter|Bangers|Berkshire+Swash|Bonbon|Chewy|Coming+Soon|Courgette|Crafty+Girls|Dancing+Script|Diplomata|Diplomata+SC|Eater|Erica+One|Ewert|Fascinate+Inline|Faster+One|Fontdiner+Swanky|Fredoka+One|Gloria+Hallelujah|Homemade+Apple|Indie+Flower|Kaushan+Script|Kavoon|Libre+Baskerville|Lobster|Lobster+Two|Londrina+Shadow|Love+Ya+Like+A+Sister|Luckiest+Guy|Modak|Monofett|Montserrat+Subrayada|Noto+Sans|Open+Sans|Open+Sans+Condensed:300|Oswald|Overlock|Pacifico|Pathway+Gothic+One|Permanent+Marker|Petit+Formal+Script|Pirata+One|Playball|Rock+Salt|Rubik+Mono+One|Seymour+One|Shadows+Into+Light|Sigmar+One|Tangerine|Ubuntu"
type="text/css" rel="stylesheet">

<svg class="" width="108.88333129882812" height="67.67703703703705">
    <defs/>
    <text x="0" y="25.639185185185188">
        <tspan style="font-size: 26px; fill: rgb(255, 0, 0); font-family: pacifico;">Type&nbsp;here</tspan>
    </text>
    <text x="54.44166564941406" y="59.47770370370371" text-anchor="middle">
        <tspan style="font-size: 26px; fill: rgb(255, 0, 0); font-family: pacifico;">line&nbsp;2</tspan>
    </text>
</svg>

<div contenteditable="true" class="flowTextEditor inlineBlockFix cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" id="flowText9" style="font-family: pacifico;" tabindex="0" spellcheck="false" role="textbox"
aria-label="Rich Text Editor, flowText9" aria-describedby="cke_133"><span style="font-size: 26px; font-family: pacifico; color: rgb(255, 0, 0);">Type here<br>line 2</span></div>

CSS

.flowTextEditor {
    line-height: 1.33;
    text-align: center;
}