JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Powered Site Search | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>
<body>

<div id="page">

    <h1>Google Powered Site Search</h1>

    <form id="searchForm" method="post">
        <fieldset>

            <input id="s" type="text" />

            <input type="submit" value="Submit" id="submitButton" />

            <div id="searchInContainer">
                <input type="radio" name="check" value="site" id="searchSite" checked />
                <label for="searchSite" id="siteNameLabel">Search</label>

                <input type="radio" name="check" value="web" id="searchWeb" />
                <label for="searchWeb">Search The Web</label>
            </div>

            <ul class="icons">
                <li class="web" title="Web Search" data-searchType="web">Web</li>
                <li class="images" title="Image Search" data-searchType="images">Images</li>
                <li class="news" title="News Search" data-searchType="news">News</li>
                <li class="videos" title="Video Search" data-searchType="video">Videos</li>
            </ul>

        </fieldset>
    </form>

    <div id="resultsDiv"></div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS

#searchForm{
    /* The search form. */
    background-color:#4C5A65;
    padding:50px 50px 30px;
    margin:80px 0;
    position:relative;

    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    border-radius:16px;
}

fieldset{
    border:none;
}

#s{
    /* The search text box. */

    border:none;
    color:#888888;
    background:url("img/searchBox.png") no-repeat;

    float:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    height:36px;
    line-height:36px;
    margin-right:12px;
    outline:medium none;
    padding:0 0 0 35px;
    text-shadow:1px 1px 0 white;
    width:385px;
}
.icons{
    list-style:none;
    margin:10px 0 0 335px;
    height:19px;
    position:relative;
}

.icons li{
    background:url("img/icons.png") no-repeat;
    float:left;
    height:19px;
    text-indent:-999px;
    cursor:pointer;
    margin-right:5px;
}

/* Styling each icon */

li.web{ width:15px;}
li.web.active,
li.web:hover{ background-position:left bottom;}

li.images{ width:22px; background-position:-18px 0;}
li.images.active,
li.images:hover{ background-position:-18px bottom;}

li.news{ width:14px; background-position:-44px 0;}
li.news.active,
li.news:hover{ background-position:-44px bottom;}

li.videos{ width:17px; background-position:right 0;}
li.videos.active,
li.videos:hover{ background-position:right bottom;}

span.arrow{
    /* The little arrow that moves below the icons */

    width:11px;
    height:6px;
    margin:21px 0 0 5px;
    position:absolute;
    background:url('img/arrow.png') no-repeat;
    left:0;
}

/* The submit button */

#submitButton{
    background:url('img/buttons.png') no-repeat;
    width:83px;
    height:36px;
    text-indent:-9999px;
    overflow:hidden;
    text-transform:uppercase;
    border:none;
    cursor:pointer;
}

#submitButton:hover{
    background-position:left bottom;
}
/* Web & news results */

.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{
   ...

JavaScript

$(document).ready(function(){

    var config = {
        siteURL        : 'blog.prakashgobhaju.com.np',    // Change this to your site
        searchSite    : true,
        type        : 'web',
        append        : false,
        perPage        : 8,            // A maximum of 8 is allowed by Google
        page        : 0                // The start page
    }

    // The small arrow that marks the active search icon:
    var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');

    $('ul.icons li').click(function(){
        var el = $(this);

        if(el.hasClass('active')){
            // The icon is already active, exit
            return false;
        }

        el.siblings().removeClass('active');
        el.addClass('active');

        // Move the arrow below this icon
        arrow.stop().animate({
            left        : el.position().left,
            marginLeft    : (el.width()/2)-4
        });

        // Set the search type
        config.type = el.attr('data-searchType');
        $('#more').fadeOut();
    });

    // Adding the site domain as a label for the first radio button:
    $('#siteNameLabel').append(' '+config.siteURL);

    // Marking the Search tutorialzine.com radio as active:
    $('#searchSite').click();    

    // Marking the web search icon as active:
    $('li.web').click();

    // Focusing the input text box:
    $('#s').focus();

    $('#searchForm').submit(function(){
        googleSearch();
        return false;
    });

    $('#searchSite,#searchWeb').change(function(){
        // Listening for a click on one of the radio buttons.
        // config.searchSite is either true or false.

        config.searchSite = this.id == 'searchSite';
    });
    function googleSearch(settings){

    // If no parameters are supplied to the function,
    // it takes its defaults from the config object above:

    settings = $.extend({},config,settings);
    settings.term = settings.term || $('#s').val();

   ...