JSFiddle - React, Tailwind, and code Playground

by Jon Beebe

HTML

<pre id="styles">
p {
    color: #999;
    font-weight: bold;
}

.box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
    
.box .content {
    position: relative;
}
    
@media (max-width: 699px) {
    .box .content {
        position: relative;
    }
}
</pre>

<div id="parsed">
    
</div>

CSS

#styles {
    display: none;
}

JavaScript

var parseCssText = function (cssText) {
    var doc = document.implementation.createHTMLDocument(""),
        styleElement = document.createElement("style");
    
    styleElement.textContent = cssText;
    doc.head.appendChild(styleElement);
    
    return styleElement.sheet;
};

var renderStylesheetToList = function(sheet) {
    var ul = document.createElement('ul');
    var count = sheet.rules.length;
    
    for(var i = 0; i < count; i++) {
        var style = parsed.rules[i],
            li = document.createElement('li'), 
            elem = document.createElement('pre');
        
        elem.innerText = style.cssText;
        li.appendChild(elem);
        ul.appendChild(li);
    }
    
    return ul;
};

var cssText = document.getElementById('styles').innerText;
var parsed = parseCssText(cssText);

console.log('parsed', parsed);

var container = document.getElementById('parsed');
var ul = renderStylesheetToList(parsed);

container.appendChild(ul);