JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<body>
    <!--banner-->
    <header>
    <div class="logo">
        <img src="https://yt3.ggpht.com/-yYFn3hE8Cu0/VcEWmWwVmQI/AAAAAAAAADA/LoBAN9MW39Q/w2120-fcrop64=1,00005a57ffffa5a8-nd/TEMPLATE_newYT%2B%25281%2529.jpg"/>
    </div>
    </header>
        <!--banner fin-->
        <!--menu-->
    <div id="container">
        <ul class="menu">
            <li>
                <a href="">Accueil</a>
            </li>
            <li>
                <a href="">Live</a>
                <ul class="dropdown">
                    <li><a href="">Live Twitch</a></li>
                    <li><a href="">Rediffusion</a></li>
                </ul>
            </li>
            <li>
                <a href="">Autre</a>
                <ul class="dropdown">
                    <li><a href="">YouTube</a></li>
                    <li><a href="">Twitter</a></li>
                </ul>
            </li>
            <li>
                <a href="">A Propos</a>
            </li>
        </ul>
    </div>
        <!--menu fin-->
        <!--background-->
     <div class="background">
         <iframe src="http://www.instant-gaming.com/affgames/igr770973/250x250" scrolling="no" frameborder="0" style="border: 1px solid #ccc; border-radius: 10px; overflow:hidden; width:250px; height:250px;" allowTransparency="true"></iframe>
         <br>
         <iframe src="http://www.instant-gaming.com/affgames/igr770973/250x250" scrolling="no" frameborder="0" style="border: 1px solid #ccc; border-radius: 10px; overflow:hidden; width:250px; height:250px;" allowTransparency="true"></iframe>
         <br>
         <iframe src="http://www.instant-gaming.com/affgames/igr770973/250x250" scrolling="no" frameborder="0" style="border: 1px solid #ccc; border-radius: 10px; overflow:hidden; width:250px; height:250px;" allowTransparency="true"></iframe>
         <br>
         <iframe src="http://www.instant-gaming.com/affgames/igr770973/250x250" scrolling="no" frameborder="0" style="border: 1px solid #ccc;...

CSS

html body{
    padding: 0;
    margin: 0;
    height: 100%
}
body {
    background-image: url(http://img0.gm.gtsstatic.com/wallpapers/8eb35844bf1d9b5c46893d5bd8a3253e_large.jpeg);
}
.logo img{
    display: block; 
    margin: 0 auto; 
    width: 80%;
    height: 174px;
}
body header div{
    color: aliceblue;
}
.background{
    width: 80%;
    height: 80% auto;
    margin: 0.1em auto;
    background-color: rgba(255,255,255,.8);
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
#container{
    margin-left: 10%;
    width: 80%;
    height: 40px;
    border: 1px solid rgba(0,0,255,0);
    text-align: center;
}
/* Menu Principal*/
.menu{
    background: #e8e5e5;
}
.menu > li{
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    width: 200px;
    height: 40px;
    margin: 0 -5px 0 0;
}
.menu > li > a{
    display: block;
    color: #000;
    text-decoration: none;
    font-family: cursive;
    font-weight: bold;
    width: inherit;
    height: inherit;
    text-align: center;
    line-height: 40px;
    -webkit-transition: all ease-in 0.3s;
    -moz-transition: all ease-in 0.3s;
    -ms-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}
.menu > li:hover > a{
    background-color: #161616;
    color: white;
}
/* Menu Secondaire*/
.menu > li > .dropdown{
    position: absolute;
    border-top: 3px solid #eb9514;
    background: #4e4e56;
    width: 201px;
    top: 300px;
    visibility:hidden;
    opacity:0;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}
.menu > li:hover > .dropdown{
    position: absolute;
    visibility:visible;
    opacity:1;
    top: 215px;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}
.menu > li > .dropdown > li{
    border-bottom: 2px solid rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: inherit;
    height: 40px;
}
.menu > li > .dropdown > li > a{
   ...