JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mams.rmit.edu.au/90r5qdz19ok91.js"></script>
<div class="promoContainer">
    <!-- **** SIDE TEXT PROMO v1.1 **** --><span class="promo related"><span class="title"><p>Join the virtual queue</p></span><span class="content"><p>Enter your mobile or student number to join the queue. </p><form method="get" id="joinQ" style="margin-bottom:10px;"><input type="hidden" name="ADV" value="Search"><label for="QRY" class="searchtext" style="display:none">Search</label><input size="30" name="QRY" id="QRY" value="" style="font-size:100%; width:156px"><input type="submit" value="Join" name="Search" style="font-size:100%"><br></form><div id="queuetime" style="margin-bottom:10px;"><p>Forecast Wait: <strong>5 min</strong><br>People in line: <strong>0</strong></p></div><p>Students can also text <strong>BC80</strong> to 0477 444 555 to join the queue.</p></span></span>
    <!-- **** /SIDE TEXT PROMO v1.1 **** -->
</div>

CSS

.promo.related {
    background: #F3F3F1;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    text-transform: none;
    width: 180px;
    margin-top: 10px;
    display: inline-block;
}
.promo.related h2 {
    margin-top:5px
}
.promo.related .title {
    text-transform: uppercase;
    font-size: 12px;
    padding: 10px;
    border-bottom: 1px solid #C2C2C2;
    display: block;
}
.promo.related .title p {
    padding: 0;
    margin: 0;
    font-weight: bold;
}
.promo.related .content {
    padding: 10px;
    display: block;
}
html, body {
    background: none;
    min-width: 960px;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 21px;
    color: #2C2C2C;
    font-family: Arial, Helvetica, Geneva, sans-serif;
}

JavaScript

$('input[type="submit"]').attr('disabled', 'disabled');

$('#QRY').keyup(function () {
    testVal($(this).val());
});

$('#QRY').blur(function () {
    testVal($(this).val());
});

function testVal (input) {
    val = input;
    if (val.match(/^s/i)) {
        if (val.match(/^s[0-9]{7}$/i)) {
            $('input[type="submit"]').removeAttr('disabled');
        } else {
            $('input[type="submit"]').attr('disabled', 'disabled');
        }
    } else {
        if (val.match(/^[0-9]{10}$/)) {
            $('input[type="submit"]').removeAttr('disabled');
            val = "61" + val.slice(1);
            
        } else {
            $('input[type="submit"]').attr('disabled', 'disabled');
            
        }
    }
}


$( "#joinQ" ).submit(function( event ) {
  joinQue(val);
  event.preventDefault();
});


function joinQue(num) {
    $.getJSON('http://www.dotspots.com.au/test_for%20curl.php? callback=?', 'formVal=' + num, function (result) {
        $("#queuetime").html("<div id='queuetime' style='margin-bottom:10px;'><p>Joined queue as: <strong>" + val.substr(val.length -4) + "</strong><br>Your wait time: <strong>"+ result.submitVal +"</strong></p></div>");
        $("#QRY").val("");
    });
}