JSFiddle - React, Tailwind, and code Playground

by Frank Topel

HTML

<body class="left-sidebar">
    <!-- Wrapper -->
    <div id="wrapper">
        <!-- Content -->
        <div id="content">
            <div class="inner">
                <!-- Post -->
                <article class="box post post-excerpt">
                    <header>
                        <!-- Note: Titles and subtitles will wrap automatically when necessary, so don't worry if they get too long. You can also remove the <p> entirely if you don't
                                                                                        need a subtitle.
                                                                                -->
                        <nav class="cl-effect-1">
                             <h2><a href="textbomber.php">Start Below</a></h2>

                        </nav>
                        <p>Guests can only send 4 texts at a time</p>
                        <p><a href="register.php">Register for more texts</a>

                        </p>
                        <p id='sentText'></p>
                    </header>
                    <div class="info" style="background-color:#F2F2F2;">
                        <ul class="stats">
                            <li><a href="https://twitter.com/home?status=Check%20out%20OtherTXT.com%20!" class="icon fa-twitter">2521</a> 
                            </li>
                            <li><a href="https://www.facebook.com/sharer/sharer.php?u=OtherTXT.com" class="icon fa-facebook">128</a> 
                                <br />
                            </li>
                        </ul>
                    </div> <span class="input input--juro">
        <input class="input__field input__field--juro" name="phonenum" maxlength="15" type="text" id="phonenum" required />
        <label class="input__label input__label--juro" for="phonenum"> <span class="input__label-content input__label-content--juro">Phone Number: (10 Digit Phone Number if USA)</span> 
                    </label>
              ...

CSS

body {
    background-color: #dbdbdb;
    background-image: url('images/bg02.png');
}
body.is-loading * {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}
/* Box */
 .box {
}
.box.calendar {
}
.box.calendar .inner {
    position: relative;
    background-color: #272E39;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 0.4em;
    padding: 0.75em 0.5em 0.75em 0.5em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
}
#nav li {
    border-top: solid 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
    padding: 0.5em 0 0.5em 0;
}
#nav li:first-child {
    border: 0;
    box-shadow: none;
    padding-top: 0;
}
#nav li:last-child {
    padding-bottom: 0;
}
#nav li a {
    display: block;
    padding: 0.4em 1em 0.4em 1em;
    text-decoration: none;
    border-radius: 0.4em;
    outline: 0;
    -moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
    -o-transition: background-color .25s ease-in-out, color .25s ease-in-out;
    -ms-transition: background-color .25s ease-in-out, color .25s ease-in-out;
    transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
#nav li.current a {
    background-color: #272E39 !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
    font-weight: 700;
    color: #fff;
}
#nav li:hover a {
    background-color: rgba(255, 255, 255, 0.1);
    color:...

JavaScript

(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o),
    m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-57476257-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
$(document).ready(function () {



    $("#whattoput").hide();
    $("#otherprov").hide();
    $("#other").hide();
    $('#calender').load('calender.html');

    var d = new Date();
    var dayofMonth = d.getDate();
    $("#" + dayofMonth).addClass('today');


});

$('input[name="whattoput"]').click(function () {
    window.open("http://othertxt.com/provlist.php");
});


$('select[name="provider"]').change(function () {
    showhideOther();
});

$('input[name="otherlistbut"]').click(function (d) {
    if ($("#phonenum").val() === "") {
        $('#phonecompText').fadeIn();
        document.getElementById('phonecompText').innerHTML = "Please enter the phone number first.<br>";
    } else {
        lookupProvider(d);
    }
});

$('input[name="sendtxt"]').click(function (e) {
    if ($("#phonenum").val() === "3108667738") {
        e.preventDefault();
        window.location.replace("https://othertxt.com/ArieIsHot.html");
    } else {
        if ($("#phonenum").val() === "") {
            document.getElementById("phonenum").style.borderColor = "red";
        } else if ($("#message").val() === "") {
            document.getElementById("message").style.borderColor = "red";
        } else if ($("#amount").val() === "0") {
            document.getElementById("amount").style.borderColor = "red";
        } else {
            document.getElementById('sentamountText').innerHTML = '<br>Sending...<br>You may leave this page.<br>';
            $("#sentamountText").fadeIn();
           ...