JSFiddle - React, Tailwind, and code Playground

by claykaboom

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!DOCTYPE html>
<html>
<head>
    <title>Scania IT </title>
</head>
<body>
    <h1>Scania IT HTML</h1> 
        <div id="container" style="display:none ">&nbsp;
            <div id="step1" style="height:60px;width:30%;float:left; background-color:#FF0000;display:inline">Requisição 1 feita, fazendo segunda...</div> 
            <div id="step2" style="height:60px;width:30%;float:left; background-color:#00CCFF;display:inline">Requisição 2 feita, fazendo terceira...</div> 
            <div id="step3" style="height:60px;width:30%;float:left; background-color:#00FF00;display:inline">Requisição 3 feita! Processo terminado!</div>
        </div>
    <img src="http://dev.uploader.br.scania.com/site/Content/Images/logotype_corp.gif" /><br />
    O conteúdo do documento é este.
    <form  action="http://jsfiddle.net/echo/jsonp/"   >
    <div class="grayDiv" id="contentDiv">
       Conteúdo da DIV.
        <br />
        <label> Digite seu nome aqui:</label>
        <input type="text" name="txtNome" />
        <br />
        <input type="button" value="Confirmar" onclick="functions.o()" />
      
    </div>
    </form>
</body>
</html>

CSS

body
{
    font-family:Arial;
}
h1
{
  font-size:20px;   
    font-weight:bold;
}
label
{
    font-weight:bold;
}
.grayDiv
{
    background-color:#CCCCCC;
    height:200px;
}
#container{
width:100%; background-color:#444;height:60px;
    padding-left:5%;
    text-align:center;
}

JavaScript

window.functions = {
    o: function() {
        $('#container').fadeIn();


        $('#step1').css('display', 'none');
        $('#step2').css('display', 'none');
        $('#step3').css('display', 'none');


        setInterval("$('#step1').fadeIn()  ", 1000);
        setInterval("$('#step2').fadeIn()  ", 2000);
        setInterval("$('#step3').fadeIn()  ", 3000);




    }
};


$(function() {
    //functions.o();
    $('input[type=submit]').button();
    $('input[type=button]').button();
    $('.grayDiv').width(300).height(400).css('margin-left', '100px').css('text-align', 'center');

    var img = document.createElement("img");
    img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";

    var src = document.getElementById("contentDiv");
    src.appendChild(img);


});