JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
<div align="center" />
  <input type="text" class="newtag" /><br>
  <input type="button" class="convert" value="convert" /><br>
  <span class="selected">Hello world</span><br>
  <textarea class="code hide" />

CSS

.hide {
    display: none;
}

JavaScript

// Add JQuery "replaceTagName" plugin
(function($) {
    $.fn.replaceTagName = function(replaceWith) {
        var tags = [],
            i    = this.length;
        while (i--) {
            var newElement = document.createElement(replaceWith),
                thisi      = this[i],
                thisia     = thisi.attributes;
            for (var a = thisia.length - 1; a >= 0; a--) {
                var attrib = thisia[a];
                newElement.setAttribute(attrib.name, attrib.value);
            };
            newElement.innerHTML = thisi.innerHTML;
            $(thisi).after(newElement).remove();
            tags[i] = newElement;
        }
        return $(tags);
    };
})(window.jQuery);

$(document).ready(function() {
    // Change selected element's tag
    $(".convert").on("click", function() {
        $(".selected").replaceTagName( $(".newtag").val() );
    });
    
    // Show selected element's code
    // ex. <span class="selected">Hello world</span>
    $(".code").val( $(".selected").html() );
});