JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="container-full">
    <div class="row">
        <div class="col-lg-12 text-center v-center">
             <h1>FINDER</h1>

            <br/>
            <br/>
            <form>
                <input type="text" name="query" id="query" />
                <input type="button" id="submit" value="FIND" />
            </form>
        </div>
    </div>
    <!-- /row -->
    <div id="results">
        <table id="results-table" class="results-table table table-striped">
            <thead>
                <tr>
                    <th>RESULTS :</th>
                </tr>
            </thead>
            <div class="url-row">
                <tr>
                    <td>
                        <table id="url-table" class="url-table table table-striped"></table>
                    </td>
                </tr>
            </div>
        </table>
    </div>
</div>

CSS

html, body {
    height:100%;
}
h1 {
    font-family: Arial, sans-serif font-size:80px;
    /*color:#DDCCEE;*/
}
.lead {
    /*color:#DDCCEE;*/
}
/* Custom container */
 .container-full {
    margin: 0 auto;
    width: 100%;
    min-height:100%;
    /* background-color:#110022; */
    /*color:#eee;*/
    overflow:hidden;
}
.container-full a {
    /*color:#efefef;*/
    text-decoration:none;
}
.v-center {
    margin-top:7%;
}

JavaScript

$("#submit").on('click', function () {

    var query = $('#query').val();
    
    var url = 'https://www.google.pl/';
    
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: query,
        contentType: 'application/json',
        success: function (response) {
            var txt = 'TEXT';
            $("#results-table" + " tr:last").after('<tr><td>' + '</td><td>' + '<a style="color:blue;" href="'+ url +'" >' + txt + '</a>' + '</td></tr>');
        }
    });
});