JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="html">
<div id="hlogo"><a href="/">Stack Overflow</a>ABC</div><div id="hmenus"><div class="nav mainnavs "><ul><li><a id="nav-questions" href="/questions">Questions</a></li><li><a id="nav-tags" href="/tags">Tags</a></li><li><a id="nav-users" href="/users">Users</a></li><li><a id="nav-badges" href="/help/badges">Badges</a></li><li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li></ul></div><div class="nav askquestion"><ul><li><a id="nav-askquestion" href="/questions/ask">Ask Question</a></li></ul></div></div>
</textarea>
<button onclick="document.getElementById('html').value = tidyHtml(document.getElementById('html').value)">Click to tidy</button>

CSS

#html {
    width:90%;
    height:200px;
    tab-size:3;
}

JavaScript

function tidyHtml(html) {
    var html = html.trim().replace(/>[^<]+</gm, function ($1) {
        return '>' + $1.substr(1, $1.length - 2).trim() + '<';
    }).replace(/>\s+</gm, '><');
    var containerElement = document.createElement('div');
    containerElement.innerHTML = html;
    var result = containerElement.innerHTML;
    var findLevel = function (child, parent) {
        var level = 0;
        while (child != parent) {
            child = child.parentNode;
            level++;
        }
        return level;
    }
    Array.prototype.slice.call(containerElement.getElementsByTagName('*')).forEach(function (element) {
        var tabs = new Array(findLevel(element, containerElement) - 1).join('	'),
            tabs2 = (element.parentNode.lastChild == element) ? ('\n' + tabs.substring(0, tabs.length - 1)) : '',
            containerElement = document.createElement('div');
        containerElement.appendChild(element.cloneNode(true));
        result = result.replace(containerElement.innerHTML, '\n' + tabs + containerElement.innerHTML + tabs2);
    });
    return result;
}