JSFiddle - React, Tailwind, and code Playground

by nzifnab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.0.0/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.0.0/css/medium-editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.0.0/css/themes/default.min.css">
<table>
    <tr>
        <td>A label:</td>
        <td>
            <div class='editable-1 editable'>Focus this field, then hit tab - watch the layout "jump"</div>
        </td>
    </tr>
    <tr>
        <td>Another label:</td>
        <td>
            <div class='editable-2 editable'>Here is my second editable section</div>
        </td>
    </tr>
</table>

CSS

[contenteditable] {
    background-color: #F2EC99;
}

td{
    padding: 5px;
}

JavaScript

editor = new MediumEditor('.editable-1');

editor2 = new MediumEditor('.editable-2');