JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jqueryscript.net/demo/Responsive-Image-Cover-Flow-Plugin-with-jQuery-CSS3-flipster/src/js/jquery.flipster.js"></script>
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-Image-Cover-Flow-Plugin-with-jQuery-CSS3-flipster/src/css/jquery.flipster.css">
<header id="Main-Header">
    <div id="input_box">
        <input type="text" value="pepee" class='search_input' />
        <br />
    </div>
</header>
<div id="Main-Content">
    <div class="Container">
        <!-- Flipster List -->
        <div class="flipster">
            <ul id="video"></ul>
        </div>
        <!-- End Flipster List -->
    </div>
</div>

CSS

/*
* Base Template
* Combines HTML5 Boilerplate & Boostrap. Includes some basic templating.
* Authored by Stephen Shaw ([email protected])
*
* Includes:
*  - HTML5Boilerplate v4.2.0
*  - LESS from Bootstrap v2.3.1
*/
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* @group Basics */
body {
  color: #333333;
  font-weight: 400;
  font-size: 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 20px;
}
/* @end */
/* @group Typography */
a {
  color: #da0d25;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #f22840;
  text-decoration: none;
}
p {
  margin: 0 0 20px;
}
small {
  font-size: 85%;
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-weight: 400;
  line-height: 1;
  color: #8d8d8d;
}
h1,
h2,
h3 {
  line-height: 40px;
}
h1 {
  font-size: 41.25px;
}
h2 {
  font-size: 33.75px;
}
h3 {
  font-size: 26.25px;
}
h4 {
  font-size: 18.75px;
}
h5 {
  font-size: 15px;
}
h6 {
  font-size: 12.75px;
}
h1 small {
  font-size: 26.25px;
}
h2 small {
  font-size: 18.75px;
}
h3 small {
  font-size: 15px;
}
h4 small {
  font-size: 15px;
}
.Subpage h1,
.Subpage h2,
.Subpage h3 {
  line-height: 30px;
}
.Subpage h1 {
  font-size: 30px;
}
.Subpage...

JavaScript

$(".search_input").keyup(function () {
    $("#video").html('');
    var search_input = $(this).val();
    var keyword = encodeURIComponent(search_input);
    var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q=' + keyword + '&format=5&max-results=20&v=2&alt=jsonc';
    $.ajax({
        type: "GET",
        url: yt_url,
        dataType: "jsonp",
        success: function (response) {
            if (response.data.items) {
                $.each(response.data.items, function (i, data) {
                    var video_id = data.id;
                    var video_title = data.title;
                    var video_viewCount = data.viewCount;
                    var video_frame = "<iframe width='340' height='200' src='http://www.youtube.com/embed/" + video_id + "?controls=0&showinfo=0&color=white&theme=light'  frameborder='0' type='text/html'></iframe>";

                    var qq = '<li>';
                    qq += '<a href="demo.html" class="Button Block">';
                    qq += '<h1>' + video_id + '</h1>';
                    qq += '<p>' + video_title + '</p>';
                    qq += '</a>';
                    qq += '</li>';
                    $("#video").append(qq);
                });
                $(function () {
                    $(".flipster").flipster({
                        style: 'carousel',
                        start: 0
                    });
                });
            } else {
                $("#myImageFlow").html("<div id='no'>No Video</div>");
            }
        }
    });
});