JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div contenteditable="true">
        <span class="level1" data-classname="level1">Level1</span>
    <div>
        <span class="level2">level 2</span>
    </div>
</div>

<button id="center">Center</button>

CSS

[contenteditable] {
    border:1px dashed red;
    line-height:2;
}

.level1 {
 font-family:Georgia, serif;
    color: rgb(0,0,155);
    font-size:1.3em;
}

.level2 {
 font-family: Arial, sans-serif;
    color: rgb(155,0,0);
    font-size:1.1em;
}
}

JavaScript

document.execCommand("stylewithcss", false, true);
var button = document.getElementById("center");
button.onclick = function(){
document.execCommand('justifycenter');
}