JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

<link rel="stylesheet" href="http://ashraafi.com/style/animate.min.css">
<script src="http://ashraafi.com/js/animateCSS.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

</head>
<div id="wrapper">
    <div id="top-logo">&nbsp;</div>
    <div id="top">
        <div id="top-menu"><a href="#">خانه</a> &emsp;&middot;&emsp;<a href="#">   مواد و خواص </a>&emsp;&middot;&emsp;<a href="#"> داستان ما</a> &emsp;&middot;&emsp;<a href="#"> ارتباط با ما</a></div>
        <hr />
    </div>
    <div id="content">
        لورم ایپسوم متن ساختگی به سادگی از صنعت شناخته چاپ استاندارد و وب سایت حروفچینی است. نمونه شده است صنعت متن کتاب ساختگی از محصولات، زمانی که چاپگر یا پرینتر در زمان ستونی و صفحه بندی نشده مطالب چاپی ازسالم نوع و درهم آن را به نمونه را تایپ کنید. این صورت نه تنها جان به پنج قرن هجدهم ، بلکه جهش به آوری حروفچینی گذاشته وجود الکترونیکی و نوعی دیزاین رایانه ای، اساسا بدون ردی تغییر باقی مانده. آن را در فوتبال با انتشار ورق حاوی شهریار معابر فکری هکرها پزشک محبوبیت بود، و اخیرا فکری با نرم افزار هکر را نشر شناخت هیت من رومیزی همانند از جمله نسخه های دیگران بوده است راکه در پی فرهنگ پس از آن و می خواهد به آن را دارند، تنها به استفاده دلیل آن است.
<br/>

اکثریت هستند معابر تغییرات بسیاری از کلمات در دسترس وجود دارد، اما دارند تغییر در بعضی از فرم رنج می برد، توسط طنز تزریق می شود، یا تصادفی است. اینترنت که نگاه نمی قصد حتی اندکی باور اگر شما استفاده از تصویب اورم ایپسوم پارسی یا فارسی شما باید جمله مطمئن شوید که هر چیزی وجود محترم ندارد شرم آور در وسط متن پنهان است. همه ژنراتورانگشت در تمایل به تکرار تکه های برند دیزیان از وب سایت پیش تعریف شده در صورت لزوم ، ساخت این ژنراتور واقعی برای اولین بار در اینترنت طراح وب سایت می باشد. فرهنگ لغت آن استفاده می کند بیش از 200 لغات لاتین ، همراه با تعداد شماری از ساختارهای سنگاپور مدل ، برای تولید ۱۷۰۰ هزار سال که به نظر می رسد منطقی حاصل بوده باشد. یورو تولید شده است در نتیجه عادی همیشه عاری از تکرار تزریق شوخ...

CSS

@charset "UTF-8";
@import url("http://ashraafi.com/style/fonts.css");*{
    padding:0;
    margin:0;
    color:#FFF;
}
html, body {
    height: 100%;
    min-width:1100px;
}
body {
    background-image:url(http://ashraafi.com/img/bgpattern.png);
    background-repeat: repeat;
}
#wrapper{
    min-width:1100px;
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -70px; /* the bottom margin is the negative value of the footer's height */
}
#top{
    width:100%;
    position:relative;
    padding-top:30px;
    visibility: visible;
}

#top hr{
    border: 0;
    height: 1px;
    background-color:#42210b;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    background: -moz-linear-gradient(left,  rgba(66,33,11,0) 0%, rgba(66,33,11,1) 3%, rgba(66,33,11,1) 50%, rgba(66,33,11,1) 97%, rgba(66,33,11,0) 100%); /* FF3.6+ */    
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(66,33,11,0)), color-stop(3%,rgba(66,33,11,1)), color-stop(50%,rgba(66,33,11,1)), color-stop(97%,rgba(66,33,11,1)), color-stop(100%,rgba(66,33,11,0))); /* Chrome,Safari4+ */    
    background: -webkit-linear-gradient(left,  rgba(66,33,11,0) 0%,rgba(66,33,11,1) 3%,rgba(66,33,11,1) 50%,rgba(66,33,11,1) 97%,rgba(66,33,11,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(66,33,11,0) 0%,rgba(66,33,11,1) 3%,rgba(66,33,11,1) 50%,rgba(66,33,11,1) 97%,rgba(66,33,11,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(66,33,11,0) 0%,rgba(66,33,11,1) 3%,rgba(66,33,11,1) 50%,rgba(66,33,11,1) 97%,rgba(66,33,11,0) 100%); /* IE10+ */
    
    background: linear-gradient(to right,  rgba(66,33,11,0) 0%,rgba(66,33,11,1) 3%,rgba(66,33,11,1) 50%,rgba(66,33,11,1) 97%,rgba(66,33,11,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0042210b', endColorstr='#0042210b',GradientType=1 ); /* IE6-9 */

}
#top-logo{
    width:...

JavaScript

$(window).load(function() {
    $('#top').animateCSS('fadeInDown', 400, function() {
        $('.bottom').animateCSS('fadeInUp', 200);
        $("#top-logo").animateCSS('flipInX', 200, function() {
            $('#content').animateCSS('fadeIn', 300);
        });
    });
});