JSFiddle - React, Tailwind, and code Playground

by shimmy

HTML

<body>
        <h1>An unhandled exception occurred while processing the request.</h1>
            <div class="titleerror">SocketException: No connection could be made because the target machine actively refused it 127.0.0.1:80</div>
                <p class="location">System.Net.Sockets.Socket.EndConnect(IAsyncResult asyncResult)</p>
            <div class="titleerror">WebException: Unable to connect to the remote server</div>
                <p class="location">System.Net.HttpWebRequest.EndGetResponse(IAsyncResult asyncResult)</p>
            <div class="titleerror">HttpRequestException: An error occurred while sending the request.</div>
                <p class="location">System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)</p>
            <div class="titleerror">IOException: IDX10804: Unable to retrieve document from: 'http://localhost/.well-known/openid-configuration'.</div>
                <p class="location">Microsoft.IdentityModel.Protocols.HttpDocumentRetriever+&lt;GetDocumentAsync&gt;d__8.MoveNext()</p>
            <div class="titleerror">InvalidOperationException: IDX10803: Unable to obtain configuration from: 'http://localhost/.well-known/openid-configuration'.</div>
                <p class="location">Microsoft.IdentityModel.Protocols.ConfigurationManager+&lt;GetConfigurationAsync&gt;d__24.MoveNext()</p>
        <ul id="header">
            <li id="stack" tabindex="1" class="selected">
                Stack
            </li>
            <li id="query" tabindex="2">
                Query
            </li>
            <li id="cookies" tabindex="3">
                Cookies
            </li>
            <li id="headers" tabindex="4">
                Headers
            </li>
        </ul>

        <div id="stackpage" class="page">
            <ul>
                                    <li>
                        <h2 class="stackerror">SocketException: No connection could be made because the target machine actively refused it...

CSS

body {
    font-family: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;
    font-size: .813em;
    color: #222;
    background-color: #fff;
}

h1, h2, h3, h4, h5 {
    /*font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;*/
    font-weight: 100;
}

h1 {
    color: #44525e;
    margin: 15px 0 15px 0;
}

h2 {
    margin: 10px 5px 0 0;
}

h3 {
    color: #363636;
    margin: 5px 5px 0 0;
}

code {
    font-family: Consolas, "Courier New", courier, monospace;
}

body .titleerror {
    padding: 3px 3px 6px 3px;
    display: block;
    font-size: 1.5em;
    font-weight: 100;
}

body .location {
    margin: 3px 0 10px 30px;
}

#header {
    font-size: 18px;
    padding: 15px 0;
    border-top: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
    margin-bottom: 0;
}

    #header li {
        display: inline;
        margin: 5px;
        padding: 5px;
        color: #a0a0a0;
        cursor: pointer;
    }

    #header .selected {
        background: #44c5f2;
        color: #fff;
    }

#stackpage ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    /*border-bottom: 1px #ddd solid;*/
}

#stackpage .details {
    font-size: 1.2em;
    padding: 3px;
    color: #000;
}

#stackpage .stackerror {
    padding: 5px;
    border-bottom: 1px #ddd solid;
}


#stackpage .frame {
    padding: 0;
    margin: 0 0 0 30px;
}

    #stackpage .frame h3 {
        padding: 2px;
        margin: 0;
    }

#stackpage .source {
    padding: 0 0 0 30px;
}

    #stackpage .source ol li {
        font-family: Consolas, "Courier New", courier, monospace;
        white-space: pre;
        background-color: #fbfbfb;
    }

#stackpage .frame .source .highlight li span {
    color: #FF0000;
}

#stackpage .source ol.collapsible li {
    color: #888;
}

    #stackpage .source ol.collapsible li span {
        color: #606060;
    }

.page table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 20px;
}

.page th {
    vertical-align: bottom;
    padding: 10px 5px...

JavaScript

//<!--
            (function (window, undefined) {
    "use strict";

    function ns(selector, element) {
        return new NodeCollection(selector, element);
    }

    function NodeCollection(selector, element) {
        this.items = [];
        element = element || window.document;

        var nodeList;

        if (typeof (selector) === "string") {
            nodeList = element.querySelectorAll(selector);
            for (var i = 0, l = nodeList.length; i < l; i++) {
                this.items.push(nodeList.item(i));
            }
        }
    }

    NodeCollection.prototype = {
        each: function (callback) {
            for (var i = 0, l = this.items.length; i < l; i++) {
                callback(this.items[i], i);
            }
            return this;
        },

        children: function (selector) {
            var children = [];

            this.each(function (el) {
                children = children.concat(ns(selector, el).items);
            });

            return ns(children);
        },

        hide: function () {
            this.each(function (el) {
                el.style.display = "none";
            });

            return this;
        },

        toggle: function () {
            this.each(function (el) {
                el.style.display = el.style.display === "none" ? "" : "none";
            });

            return this;
        },

        show: function () {
            this.each(function (el) {
                el.style.display = "";
            });

            return this;
        },

        addClass: function (className) {
            this.each(function (el) {
                var existingClassName = el.className,
                    classNames;
                if (!existingClassName) {
                    el.className = className;
                } else {
                    classNames = existingClassName.split(" ");
                    if (classNames.indexOf(className) < 0) {
                        el.className =...