JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
 <html>
   <head>
	  <meta charset="utf-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
      <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 
      <script type="text/javascript" language="javascript">
 
        function videopanel(id) { 
            str = '<iframe width="100%" height="350" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
            return str;
        }
 
		/// 取代原程式的jQuery("#id").bind("click touch" ...之作用 ///
		function videochange(id) {
			document.getElementById("player").innerHTML = videopanel(id);		
		}

      </script>
 
   </head>
   <body>
 
      <div data-role="page" id="page">
 
			<div data-role="content" style="margin:0px 0px 0px 0px; padding:10px 2% 400px 2%; width:96%; height:900px; background-color:#000000;">
			
			<div id="player">
			<iframe width="100%" height="350" src="http://www.youtube.com/embed/ANSI0YjVLRg" frameborder="0" allowfullscreen></iframe>
			</div>

            <br /><br />
 
			<div id="videolist">
			</div>
 
			</div>
		 
			<script>
			var videoid = new Array("ANSI0YjVLRg","LVk2T9gQLro","fiA9jlW0Qto","gOk-Guchg2E","BjZ3U97RPjg","IEvOBoso3Xk");
			var videotitle = new Array("大學生了沒~~~Ken哥 好呷嗎","TVBS新聞報導HoJava(賀呷嗎)美食APP","壹電視報導HoJava(賀呷嗎)美食APP","新唐人亞太新聞報導HoJava(賀呷嗎)美食APP","TBC台中都會新聞報導HoJava(賀呷嗎)美食APP","威達雲端電訊中都新聞採訪報導HoJava(賀呷嗎)美食APP");
			var i=0;
			var str = '<ul data-role="listview" data-inset="true" data-filter="true">';
			for ( i=0 ; i<6 ; i++)
			  {
			   str += '<li><a href=\'javascript:videochange("' + videoid[i] + '")\'>' + videotitle[i] + '</a></li>'; 
			  }
			str += '</ul>';
			document.getElementById("videolist").innerHTML = str;
			</script>
 
      </div>
	  

  ...