JSFiddle - React, Tailwind, and code Playground

by plouffe514

HTML

<div class="h"><h1><a href="#">IP-API.com<br><span id="t"></span></a></h1></div><div id="c"><form onsubmit="return q(document.forms[0].ip.value),!1"><fieldset><legend><label for="ip" id="l"></label></legend><div><input id="ip" spellcheck="false"></div><input type="submit" id="b"></fieldset></form><h2 id="e">JavaScript is required.</h2><div id="r"><table><tbody id="o"></tbody></table></div><h3><a href="/docs/" id="d">&nbsp;</a></h3></div><div class="f"><div id="loDiv"></div>&copy; 2018 IP-API.com | <a href="/docs/">api</a> | <a href="https://signup.ip-api.com/">pro</a> | <a onclick="cn()">contact</a></div>

CSS

<style>
        html {
            overflow-y: scroll
        }

        body {
            width: 910px;
            margin: 20px auto 10px;
            padding: 0 10px;
            font: 13px/1.231 sans-serif;
            background: #EEE;
            color: #444;
            line-height: 1.4em;
            font-size: 1em
        }

        h2 {
            border-bottom: 1px solid #ccc;
            font-size: 1.2em;
            font-weight: 700;
            margin: 7px 0 15px
        }

        h3 {
            margin: 16px 0 10px 0
        }

        div#c {
            background: #FFF;
            border: 1px solid #ccc;
            -moz-border-radius: 0 0 8px 8px;
            border-radius: 0 0 8px 8px;
            width: 830px;
            border-width: 1px;
            padding: 8px 40px
        }

        .b {
            font-weight: 700
        }

        .h {
            height: 59px;
            width: 812px;
            background-color: #828282;
            -moz-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
            text-align: center;
            position: relative;
            padding: 0 50px
        }

            .h h1 {
                color: #f2f2f2;
                font-size: 1.5em;
                line-height: 1.1em;
                margin-top: 1px;
                padding: 4px
            }

                .h h1 a {
                    color: #EEE;
                    outline: 0;
                    text-decoration: none
                }

                    .h h1 a:hover {
                        color: #e6e6e6
                    }

        .f {
            color: #999;
            padding-top: 9px;
            font-size: .8em;
            text-align: center;
            width: 900px;
            margin-left: auto;
            margin-right: auto
        }

            .f a {
                cursor: pointer
            }

        a {
            color: #797979;
            outline: 0;
           ...

JavaScript

<script>function cn() { return prompt("You can contact us at:", unescape("636f6e746163744069702d6170692e636f6d".replace(/(..)/g, "%$1"))), !1 } function a(e, n) { e = p + "//" + e, this.gr = function () { return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : window.XMLHttpRequest ? new XMLHttpRequest : !1 }; var o = gr(); o.onreadystatechange = function () { 4 == o.readyState && 200 == o.status && n(j(o.responseText)) }, o.open("GET", e, !0), o.send() } function j(e) { try { return JSON.parse(e) } catch (n) { return !1 } } function eh(e) { return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;") } function x(e) { return document.getElementById(e) } function ne(e) { return document.createElement(e) } function o(e, n) { x(e).innerHTML = n } function z(e, n, t) { var i = x("o"); if (i) { if (t && x(t)) return o(t, n); var a = ne("tr"), r = ne("th"), c = ne("td"); t && (c.id = t), r.appendChild(document.createTextNode(e)), c.innerHTML = n, a.appendChild(r), a.appendChild(c), i.appendChild(a) } } function ma(e, n, o) { return "<a " + (n ? "class='mobile' title='mobile'" : o ? "class='proxy' title='proxy'" : "") + " href='#" + e + "'>" + e + "</a>" } function nf() { } function cz(e) { for (var n = 10, o = 2; 320 * n > e;)n /= 2, o++; return Math.min(16, o) } function ms(e, n, o) { zl = cz(o), x("r").style.backgroundImage = "url('" + p + "//maps.googleapis.com/maps/api/staticmap?key=AIzaSyCsjfMFXRzKEb2urB700WtPy7u2HpnWWqM&center=" + e + "," + n + "&zoom=" + zl + "&format=jpg&size=320x349&language=" + cl + "&path=color:0x3af1ad30|weight:" + Math.max(15, parseInt(o * (1190 / Math.pow(2, 17 - zl)))) + "|" + e + "," + n + "|" + e + "," + (n + 1e-5) + "')", mo(1) } function mu() { x("r").style.backgroundImage = "", mo(1) } function mo(e) { x("r").style.opacity = e } function gi() { var e = {}, n = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection, o = { optional: [{ RtpDataChannels: !0 }] }, t = {...