JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
     <h2>XSS Challenge</h2>

</div>
<div id="Browser">
    <div id="Toolbar" class="col-lg-12 clearfix">
        <div class="input-group">
            <input id="LocationBar" type="text" class="form-control" placeholder="URL" /> <span class="input-group-btn">
                <button id="GoBtn" class="btn btn-primary" type="button">Go</button>
            </span>

        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">Example | Search</div>
        <div id="page" class="panel-body">
            <div class="page-header">
                 <h2>Search <small id="SearchTerms">find what you need</small></h2>

            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <input id="Query" type="text" class="form-control" placeholder="Search for..."></input> <span class="input-group-btn">
        <button id="SearchBtn" class="btn btn-success" type="button">search</button>
      </span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

#Browser {
    border:1px solid #ddd;
    padding:2px;
    margin:10px;
    border-radius:5px;
    min-height:500px;
    background-color:lightgray;
}
#page {
    margin: 15px 5px;
    border:1px solid lightgray;
    height:450px;
}
#Toolbar {
    padding:0;
    margin-bottom:5px;
}

JavaScript

setLoc();

$('#SearchBtn').click(function () {
    var query = $('#Query').val();
    setLoc(query);
    query = filter(query);
    $('#SearchTerms').html(query);
});

function filter(query) {
eval(atob("cXVlcnkgPSBxdWVyeS50b0xvd2VyQ2FzZSgpLnJlcGxhY2UoJzxzY3InICsgJ2lwdD4nLCAnJyk7cXVlcnkgPSBxdWVyeS50b0xvd2VyQ2FzZSgpLnJlcGxhY2UoJzwvc2NyJyArICdpcHQ+JywgJycpO3ZhciBlbGVtID0gJChxdWVyeSApO2VsZW0uZWFjaChmdW5jdGlvbiAoKSB7dmFyIGF0dHJpYnV0ZXMgPSB0aGlzLmF0dHJpYnV0ZXM7dmFyIGkgPSBhdHRyaWJ1dGVzLmxlbmd0aDt3aGlsZSAoaS0tKSB7dGhpcy5yZW1vdmVBdHRyaWJ1dGVOb2RlKGF0dHJpYnV0ZXNbaV0pO319KTtpZihlbGVtWzBdKXF1ZXJ5ID0gZWxlbVswXS5vdXRlckhUTUw7"));
    return query;
}

$('#GoBtn').click(function () {
    $('#Query').val(getParams());
    $('#SearchBtn').click();
});

$('#Query').keyup(function (event) {
    if (event.keyCode == 13) {
        $("#SearchBtn").click();
    }
});
$('#LocationBar').keyup(function (event) {
    if (event.keyCode == 13) {
        $("#GoBtn").click();
    }
});

function setLoc(param) {
    if (!param) $('#LocationBar').val('http://example.com/search');
    else $('#LocationBar').val('http://example.com/search?q=' + param);
}

function getParams() {
    //lazy
    var count = 'http://example.com/search?q='.length;
    var url = $('#LocationBar').val();
    return url.substring(count);
}