JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <span id="details">Please Type In a URL</span>
    <input type="text" id="urlbox" placeholder="http://www.stackoverflow.com/" />
    <input type="button" id="urlbttn" value="Check URL" />
    <div id="results">Page Exists</div>
</div>

CSS

html, body { background-color: #4679BD; padding-top: 50px; font-family: Arial, Helvetica, sans-serif; }

#content { margin: auto; text-align: center; }
#details { display: block; color: white; font-size: 125%; margin-bottom: 10px; }
#urlbttn { font-size: 150%; padding: 10px; }
#results { display: none; color: red; font-size: 300%; margin-top: 30px; font-weight: bold; text-shadow: 1px 1px black; }

#urlbox {
    padding: 10px;
    font-size: 150%;
    width: 500px;
    text-align: center;
}

JavaScript

//
// Xander Lamkins - 2013 - See:
//     http://stackoverflow.com/questions/20697098/launching-custom-url-and-redirecting-if-not-found-using-js
//
// urlExists functions based off of:
//     http://stackoverflow.com/a/13041787/595437
//
// I have made minor revisions to make it cleaner and better 
// integrate with my application.
//

function urlExists(url, yes, no) {
    $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22"+encodeURIComponent(url)+"%22&format=json'&callback=?", function(data) {
        if (data.results[0]) {
            yes();
        } else {
            no();
        }        
    });
}

$(document).ready(function() {
    $('input:text, input:button').addClass("ui-corner-all");
    
    $('#urlbttn').click(function() {
        urlExists($('#urlbox').val(), function() {
            $('#results').text('Page Exists').css('color', 'green').fadeIn(1000, function() {
                $(this).fadeOut(1000)
            });
        }, function() {
            $('#results').text('Page Does Not Exist').css('color', 'red').fadeIn(1000, function() {
                $(this).fadeOut(1000)
            });
        });
    });
});