JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<ul id="rules"></ul>
<br/>
<br/>
<br/>
<div>
    <!-- Site navigation menu -->
    <ul class="navbar">
        <li><a href="index.html">Home page</a>

            <li><a href="musings.html">Musings</a>

                <li><a href="town.html">My town</a>

                    <li><a href="links.html">Links</a>

    </ul>
    <!-- Main content -->
     <h1>My first styled page</h1>

    <p>Welcome to my styled page!
        <p>It lacks images, but at least it has style. And it has links, even if
            they don't go anywhere&hellip;
            <p>There should be more here, but I don't know what yet.
                <!-- Sign and date
                the page, it's only polite! --> <address>Made 5 April 2004<br>
                                        by myself.</address>

</div>

CSS

body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d
}
ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}
h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black
}
ul.navbar a {
    text-decoration: none
}
a:link {
    color: blue
}
a:visited {
    color: purple
}
a.fx-doop {
    color:green;
}
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted
}
.fx-ping {
    border:1px solid blue;
}
hr, .fx-doop, .blah-blah {
    color:purple;
}

JavaScript

$(document).click(function (event) {
    var rules = GetAppliedCssRules($(event.target));
    var $ul = $("#rules").empty();
    $.each(rules, function () {
        $ul.append("<li>" + this + "</li>");
    });
    event.preventDefault();
});

function GetAppliedCssRules($element) {
    var appliedRules = [];
    for (var x = 0; x < document.styleSheets.length; x++) {
        var rules = document.styleSheets[x].cssRules;
        for (var i = 0; i < rules.length; i++) {
            var txt = rules[i].selectorText;
            if (txt.indexOf('.fx-') > -1) {
                appliedRules.push(txt);
            }
        }
    }
    return appliedRules;
}