JSFiddle - React, Tailwind, and code Playground

by tucado

HTML

<div id="wrapper">
        
      <div id="header">
            <img src="http://test.captive-portal.com/slideup/_images/header.png">
      </div>
    
        <div class="delay">
            <div class="spons"><img src="http://test.captive-portal.com/slideup/_images/brought-by.jpg"></div>            
        
            <div class="overflow">
            
                <div id="nav">
                
                    <a href="#"><div class="menu-button1"><img src="http://test.captive-portal.com/slideup/_images/own-ad1.jpg"></div></a>
                    <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b1.jpg"></div></a>
                    <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b2.jpg"></div></a>
                    <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b3.jpg"></div></a>
                    <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b4.jpg"></div></a>
                    
                </div>
    
            </div>        
            <div id="finalbut">
                <a href="access-ok.html"><img src="http://test.captive-portal.com/slideup/_images/butt-go-online.png"></a>
            </div>
    
      </div>
        
    </div>

CSS

/* CSS Document */

/* RESET */    
body, div, h1, h2, h3, h4, ul, ol, li, p { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: 1em; }
address {font-style: normal;}
ul {list-style-type: none;}
a:link {color: #000;} a:visited {    color: #039;} a:hover {color: #09c;} a:active {color: #f00;}
img { border: 0; }
 {    margin: 0; padding: 0;}
.clearfix { clear: both; }

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#000 url(../_images/back1.jpg) top center no-repeat;
    color:#542904;
}

.spons{
    text-align:center;    
    margin:10px 0 10px -10px;;
}

#wrapper {
        -webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
        box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);    width: 480px;
    margin: 0 auto;
        background: #ffffff; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: -moz-linear-gradient(top,  #ffffff 33%, #f4f4f4 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(33%,#ffffff), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 33%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 33%,#f4f4f4 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 33%,#f4f4f4 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffffff 33%,#f4f4f4 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-8 */
}

.delay{
    padding: 20px 10px 10px 10px;
    margin-top: -10px;
}

#finalbut{
    text-align:center;    
    margin-top:40px;
}

.overflow{
    overflow:hidden;
}

#nav{
    padding-bottom: 20px;    
}

#nav a{
    float:left;
    text-decoration:none;
}

.menu-button{
    background-color:rgba(255,255,255,0.75);
    width: 205px;
    height: 180px;
    padding:0;
    margin:12px;
   ...

JavaScript

$(document).ready(function(){
     function delay() {
       $('.delay').slideDown(500);
      }
      setTimeout(delay, 2500);
    });