JSFiddle - React, Tailwind, and code Playground

by Nick B

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid main">
    <div class="row content">
      <div class="side-left col-sm-2">
      </div>

      <div class="text-center col-sm-8">

      <!-- Controls-->
        <div class="container-fluid head">
          <div class="row">
            <div class="controls-main col-sm-12">
             <div class="container-fluid ">
               <div class="row">
                 <div class="col-sm-5 control-sections">
                  <!-- Search-->
                   <div class="container-fluid search">
                    <form>
                      <input type="text" name="search" placeholder="&#xf002;"
                       style="font-family:'Russo One', FontAwesome">
                      <input type="submit" name="search" id="search-btn">
                    </form>
                  </div>
                  <!-- Search-->
                 </div>
                 <!-- Random-->
                 <div class="col-sm-5 col-sm-offset-2 control-sections">
                   <button type="button" class="rand-wiki">Random Wiki</button>
                 </div>
                 <!-- Random-->
               </div>  
             </div>
            </div>
          </div>
        </div>
      <!-- Controls-->

      <!-- Search Return-->
      <div>
        

      </div>
      <!-- Search Return-->

      <div class="side-right col-sm-2">
      </div>
    </div>
  </div>

CSS

/*

	Wikipedia Project
	code by Nick Bonne

*/
@import url("https://fonts.googleapis.com/css?family=Russo+One");

html, body {
	height: 100%;
}

.main {
	height: 100%;
	background:	#35474e;
}

.side-left .side-right {
	height: 100vh;
}

.text-center {
	height: 100vh;
	background: #bcd5df;
}

.controls-main {
	margin-top: 25%;
	height: 200px;
	width: 100%;
	background: #71adb9;
	border-radius: 5px;
	-webkit-transition:1s;
}

.search-main {
	margin-top: 2%;
	height: 200px;
	width: 100%;
	background: #71adb9;
	border-radius: 5px;
}

.control-sections {
	background: #999f8b;
	margin-top: 2%;
	height: 160px;
	border-radius: 5px;
	font-family: "Russo One", FontAwesome;
	color: #999f8b;
}

input[type=text] {

    box-sizing: border-box;
    border-radius: 5px;
    border-color: #bcd5df;
    border-width: 5px;
    background-color: #35474e;
    height: 100%;
    width: 70%;
    padding: 6px 10px;
}

input[type=submit] {

	box-sizing: border-box;
	border-radius: 5px;
    background-color: #35474e;
    border-color: #bcd5df;
    height: 100%;
    padding: 6px 10px;
}

.rand-wiki {
	
	height: 90%;
	width: 90%;
	margin-top: 2%;
	font-family: "Russo One";
	border-radius: 5px;
	border-width: 5px;
	background-color: #35474e;
    border-color: #bcd5df;
    font-size: 2em;
}

.search {
	height: 40px;
	margin-top: 60px;
}

JavaScript

/*

	Wikipedia Project
	code by Nick Bonne

*/
$( document ).ready(function() {
	$(".rand-wiki").click(function() {
        window.open("https://en.wikipedia.org/wiki/Special:Random");
    });
    $(".s-form").on('click', function{
    	$("search").animate({
    		background: red
    	}, 500);
    })
});