JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<div id="input" contenteditable="true" class="caja"><header>
            <h1>Titulo de la página</h1>
        </header>
        <nav>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </nav>
        <article>
            <article class="info">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus et error voluptatum quos sunt laboriosam voluptatem, eius hic qui excepturi officia numquam consequatur atque quaerat deserunt dolores eos incidunt recusandae.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, laborum nemo voluptas voluptatem? Pariatur saepe nostrum dolorum culpa, repudiandae dignissimos vero ea id optio cum, perspiciatis velit esse ducimus! Quasi.
                loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quaerat quod distinctio illum repellendus reprehenderit mollitia deleniti! Quas ullam, excepturi temporibus consequuntur amet quidem voluptatum modi nam totam, expedita alias.
            </article>
        </article>
        
        <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptatem in assumenda expedita, earum nostrum incidunt dolore eaque fuga, aspernatur qui illum facere officiis nisi esse quis sint repellat! Voluptates.</aside>
        <footer>Este es el pie de página</footer></div>
<div style="clear:both;">
    <input type="button" value="Get HTML">
</div>
<div id="output" style="border: 1px solid;clear:both;width:300px;height:100px;font-family:courier;font-size:10px;">

</div>

JavaScript

$(':button').click(function() {
    $('#output').text(JSON.stringify({ 
        data:$('#input').html() 
    }));
});