JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<a href='javascript:void(0);' id='Anchor_navlist'></a>
<a href='javascript:void(0);' id='Anchor_viewmode'></a>
<div id="main">
    <div id="viewmode">
    </div>
    <div id="mainbar"></div>
    <div id="bottombar"></div>
</div>

CSS

#main,#viewmode{
    position:fixed;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:720px;
    width:1280px;
    #border: 0px solid red;
    background-color: #818181;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
}

.app_title{
padding: 0px;
font-size: 2em;
padding-left: 5px;
float: left;
font-weight: bold;
color: rgba(56, 56, 56, 0.77);
font-family: NeoSans;
text-shadow: 1px 1px 1px #23DBDB;
}
 
#moviename
{ 
    position:fixed;
    top: 416px;
    left:0px;
    margin:0;
    padding: 4px;
    padding-top: 7px;
    height: 45px;
    width: 1272px;
    font-size: 2.5em;
    text-align:center;
    #border: 0px solid red;
    background-color: rgb(30, 30, 30); 
    font-family: NeoSans;
    #background-color:#888;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
    font-weight: 900;
    line-height: 1em;
    /* color: rgba(18, 235, 243, 0.33); */
color: rgba(56, 56, 56, 0.40);
    text-shadow: 2px 1px 1px #23DBDB;
    /* text-shadow: 0px 2px 4px rgb(80, 80, 80), 0 0 0 #000, 0px 2px 4px rgb(80, 80, 80); */
    /* box-shadow: inset 0px 0px 50px #999; */ 
}

#infowrapper{

    position:fixed;
    

    top: 39px;
    

    left: 0px;
    

    margin: 0px;
    

    padding: 0px;
    

    height: 377px;
    

    width: 1280px;
    font-size:1em;
    text-align:left;
    #border: 0px solid red;
    font-family: NeoSans;
    #background-color:#888;
    

    box-shadow: inset 0px 0px 30px #000;
    overflow:hidden;
    

    color: #ddd;
    #text-shadow:0px 0px 25px #000;
    

    /* border-radius: 10px; */
    

    /* background-color: rgba(100, 100, 100, 0.80); */

}

.hidden{
display:none;
}


#fanart{
    /* position: absolute; */
    width: 640px;
    height: 360px;
    /* top: 50px; */
    /* left: 659px; */
    /* border-radius: 5px; */
}

#listview{
    position: absolute;
    #background:red;
    top:39px;
    width:100%;
    height:642px;
}
.genre{
    width:298px;
    height:36px;
    border: 1px solid...

JavaScript

var jsondata = {  
   "status":"OK",
   "results":[  
      {  
         "id":"action",
         "title":"боевик"
      },
      {  
         "id":"adventure",
         "title":"приключения"
      },
      {  
         "id":"aerobics",
         "title":"фитнес"
      },
      {  
         "id":"art",
         "title":"искусство"
      },
      {  
         "id":"biography",
         "title":"биография"
      },
      {  
         "id":"cartoon-series",
         "title":"сериал м/ф"
      },
      {  
         "id":"catastrophe",
         "title":"катастрофы"
      },
      {  
         "id":"childrens",
         "title":"детское"
      },
      {  
         "id":"comedy",
         "title":"комедия"
      },
      {  
         "id":"cookery",
         "title":"кулинария"
      },
      {  
         "id":"criminal",
         "title":"криминал"
      },
      {  
         "id":"dancing",
         "title":"танцы"
      },
      {  
         "id":"detective",
         "title":"детектив"
      },
      {  
         "id":"drama",
         "title":"драма"
      },
      {  
         "id":"erotica",
         "title":"эротика"
      },
      {  
         "id":"fantasy",
         "title":"фэнтези"
      },
      {  
         "id":"fiction",
         "title":"фантастика"
      },
      {  
         "id":"fishing",
         "title":"рыбалка"
      },
      {  
         "id":"foreign-cartoons",
         "title":"заруб. м/ф"
      },
      {  
         "id":"health",
         "title":"здоровье"
      },
      {  
         "id":"historical",
         "title":"исторический"
      },
      {  
         "id":"history",
         "title":"история"
      },
      {  
         "id":"horror",
         "title":"ужасы"
      },
      {  
         "id":"housecountry",
         "title":"дом/дача"
      },
      {  
         "id":"humourist",
         "title":"юмористы"
      },
      {  
         "id":"hunting",
         "title":"охота"
      },
      {  
         "id":"melodrama",
        ...