JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/dx.light.css">
<script src="https://unpkg.com/devextreme-quill/dist/dx-quill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/dx.all.js"></script>
<div class="demo-container">
    <div id="editor"></div>
</div>

JavaScript

$(function() {
    $("#editor").dxHtmlEditor({
    		value,
        height: 450,
        allowSoftLineBreak: true,
        toolbar: {
            items: [
                {
                    name: "header",
                    acceptedValues: [false, 1, 2, 3]
                },
                "separator", "bold", "color", "separator",
                "alignLeft", "alignCenter", "alignRight", "separator",
                "insertTable", "deleteTable",
                { name: "insertHeaderRow", options: { icon: 'header', hint: 'Add Header Row' } }, "insertRowAbove", "insertRowBelow", "deleteRow",
                "insertColumnLeft", "insertColumnRight", "deleteColumn"
            ]
        }
    });
});


var value = `
				<h2>
            Soft line-breaks
        </h2>
        <p><br></p>
        <ul>
        	<li>Item 1</li>
          <li>Item 2<br><i>Item notes</i></li>
          <li>Item 3</li>
        </ul>
        <p><br></p>
        <table>
        		<thead>
              <tr">
                  <th style="text-align: left;">Task Subject</th>
                  <th style="text-align: center;">Status</th>
                  <th style="text-align: right;">Progress<br><i>(in percent)</i></th>
              </tr>
            </thead>
            <tbody>
              <tr style="text-align: center;">
                  <td style="text-align: left;">Upgrade Server Hardware</td>
                  <td style="text-align: center;">⌛<br>In Progress</td>
                  <td style="text-align: right;">45%</td>
              </tr>
              <tr style="text-align: center;">
                  <td style="text-align: left;">Upgrade Personal Computers</td>
                  <td style="text-align: center; color: red;">⏸️<br>Need Assistance</td>
                  <td style="text-align: right;">80%</td>
              </tr>
              <tr style="text-align: center;">
                  <td style="text-align: left;">Approve Personal Computer Upgrade Plan</td>
                ...