JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

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 }
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }

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++) {
            if ($element.is(rules[i].selectorText)) {
                appliedRules.push(rules[i].selectorText);
            }
        }
    }
    return appliedRules;
}