JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://a3p-mohammadalhor.googlecode.com/svn/trunk/font-ge_dinar.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
		<section id='main-page'>
			<div style='background:rgba(0,0,0,0.7);height:100%'/>
			<div id="top-bar">
				
			</div>
			<div class='item-wrap'>
			<span class='line top'></span>
			<div class='text-top'>تأثيرات التحميل</div>
			<div class='text-below'>مقدمة من مدونة احتراف عربي</div>
			<span class='line bottom'></span>
			<div id="buttons-area">
				<a href="#demo1">الشكل 1</a>
				<a href="#demo2">الشكل 2</a>
				
			</div>
			<div class='or'><img src="http://3.bp.blogspot.com/-zOyirogMcP8/U6AGCHogiKI/AAAAAAAACcc/63qKZJs218g/s1600/or+text.png"></div>
			<div class='scroll'><div>إنتقل لأسفل قليلاً</div><img src="http://1.bp.blogspot.com/-VZ_F23N-hIM/U6AGCHYhXFI/AAAAAAAACcg/704VnzFQtO8/s1600/Scroll+Down.png"></div>
		</div>
		</section>	
		<section id='demo1'>
			    <div id="loader">
			    	<div class="demo-text">الشكل 1</div>
			        <div class="spinner">
			            <div class="spinner-inner"></div>
			        </div>
			        <div class="text-below demo">مقدمة من<a href="http://arabic3professional.blogspot.com/">إحتراف عربي</a></div>
			    </div>
			
		</section>
		<section id='demo2'>
			<div id='loader2'>
				<div class="demo-text">الشكل 2</div>
				<div class="wrap">
				<div class="bg">
				<div class="loading">
				<span class="title">....إنتظر</span>
				<span class="text">إسم مدونتك</span>
				</div> </div></div>
				<div class="text-below demo">مقدمة من <a href="http://arabic3professional.blogspot.com/">إحتراف عربي</a></div>
			</div>
				
		</section>
		
</body>
			
	</body>

CSS

html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
    letter-spacing: normal;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
            letter-spacing: 0px;
    text-align: right;
     
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* Styling Starts Here */
		body,html{
			font-family: ge_dinar_tworegular;
			height:100%;
		}
		section{
			height: 100%;
		}
		#main-page{
			background:url(http://4.bp.blogspot.com/-i0YplRQRqic/U564Cv8ffKI/AAAAAAAACcM/VKRmhxEJYJA/s1600/tumblr_mopqkkwK2M1st5lhmo1_1280.jpg) no-repeat;
			background-size: cover;
			color:#fff;
		}
		#top-bar {
		    background: none repeat scroll 0 0 #FFFFFF;
		    border-bottom: 3px solid #004486;
		    padding: 12px;
		    text-align: center;
		}
		#top-bar a {
		    color: #323232;
		    font-weight: 700;
		   
		}
		.item-wrap {
		  margin-top: 12%;
		  text-align: center;
		}
		.line {
		  background: none repeat scroll 0 0 #E1E1E1;
		  position: absolute;
		  height: 1px;
		  display: inline-block;
		}
		.line.top {
		  margin: -24px 0 0 -300px;
		  width:...