JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<a href="#openModal">Open Modal</a>


<div id="input_box"> 
  <input type="text" class='search_input' /> 
</div> 
<div id="result"></div> 


<style> 
  /* el DIV donde colocamos el buscador */ 
  #input_box { 
    text-align: center; 
    width:500px; 
  } 
  /* el cuadro de búsqueda */ 
  .search_input { 
    font-size: 20px; 
    padding: 5px; 
    text-align: center; 
    width: 400px; 
  } 
  /* el DIV donde se mostrarán los resultados */ 
  #result { 
    background-color: #000; 
    margin-top:25px; 
    min-height:380px; 
    width:500px; 
  } 
  /* un texto, sólo visible cuando no hay resultados a mostrar */ 
  #no { text-align: center; } 
  /* el título del video encontrado */ 
  #title { 
    font-size: 18px; 
    height: 40px; 
    line-height: 1; 
    padding-bottom: 10px; 
    text-align: center; 
  } 
  /* el texto inferior con el contador de YouTube */ 
  #count { 
    height: 20px; 
    padding-top: 10px; 
    text-align: right; 
  } 
</style> 




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>


<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function(){ 
  $(".search_input").focus(); 
  $(".search_input").keyup(function() { 
    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=1&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='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>"; 
            var final="<div...