JSFiddle - React, Tailwind, and code Playground

by madhu72kumar

HTML

<script src="http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911"></script>
<script src="http://fonts.googleapis.com/css?family=Oswald"></script>
<script src="http://fonts.googleapis.com/css?family=Wellfleet"></script>
<body>
<header id="header">
<div>
<div id="logo"><a href="">hi </a></div>

<nav id="nav">
	<ul>
	<li><a href="#slide1" title="Next Section" >Slide 1</a></li>
	<li><a href="#slide2" title="Next Section">Slide 2</a></li>
	<li><a href="#slide3" title="Next Section">Slide 3</a></li>
	<li><a  href="#slide4" title="Next Section">Slide 4</a></li>
	<li><a href="#slide5" title="Next Section">Slide 5</a></li>
	</ul>
</nav>
</div>
</header>

	<div id="slide1">
		<div>
			<div id="christmas_tree"> </div>
			<div id="snowflakes1"></div>
			<div id="snowflakes2"></div>
            <h2>MERRY</h2>
		    <h1>CHRISTMAS</h1>
		    <div id="divider"> </div>
		     <h3>HAPPY NEW YEAR </h3>
           <div id="ribbon"></div>
	       <div id="new_year"> </div>
		</div>
    </div>

	<div id="slide2">
		<div >
            <div>
		    <h3>“Then the Grinch thought of something he hadn't before! What if Christmas, he thought, doesn't come from a store. What if Christmas...perhaps...means a little bit more!”</h3>
		  <img src="http://s4.postimg.org/qa8f07l2h/dr_seuss.png" align="left"/> <h4>Dr. Seuss </h4>
		</div>
		</div>
    </div>

   <div id="slide3">
		<div>
			   <div>
		       <h3>“I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.”  </h3>
		      <img src="http://s4.postimg.org/8vo6rxnxl/norman.png" align="left"/> <h4>Norman Vincent Peale </h4>
		    </div>
		</div>
    </div>

	<div id="slide4">
		<div>
              <div>
		    <h3>“Christmas doesn't come from a store, maybe Christmas perhaps means a little bit more....” </h3>
		  <img src="http://s4.postimg.org/qa8f07l2h/dr_seuss.png" align="left"/> <h4>Dr. Seuss...

CSS

body{
	margin: 0;
	padding: 0;
	width: 100%;
}

h1 {
    font-family:"Arvo";
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

h2 {
   font-family:"Arvo";
   font-weight: normal;
   font-size: 40px;
   text-align: center;
   color: #fff;
   margin: 0;
	padding: 0;
}

h3 {
   font-family: Oswald;
   font-weight: normal;
   font-size: 16px;
   text-align: center;
   margin: 5px 0;
	padding: 0;
	z-index: 1;
	position: relative;
}

.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 960px; }
.clear { clear: both; }


#header {
	width: 100%;
	background: url('http://s4.postimg.org/e34oinf55/header_bg.png');
	height: 80px;
	position: fixed;
	margin-top: 30px;
}

#nav { width: 410px; float: right; margin-top: 20px; }
#logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family:"Wellfleet"; font-weight: bold; }
#nav ul{
	list-style: none;
	display: block;
	margin: 0 auto;
	list-style: none;
}

#nav li{
	margin-top: 9px;
	float: left;
	padding-left: 21px;
}

#nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: 'Wellfleet'; }
#nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav li a:hover { color: #fff; opacity:1;  }

.quotes {
 font-family: 'Goudy Bookletter 1911', serif;
   font-weight: normal;
   font-size: 30px;
  text-align: left;
  margin: 50px auto;
}

 .author_name_white { font-family:"Wellfleet";  margin: 70px 0 0 75px; color: #fff; font-size: 20px; }
 .author_name_gray { font-family:"Wellfleet";  margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; }
 .quotes_container { width: 800px; margin: 0 auto; }
#christmas_tree { background: url('http://s4.postimg.org/tako306zt/christmas_tree.png')no-repeat; width: 48px; height: 77px; margin: 0 auto; position: relative; bottom: -35px;}
#divider { background: url('http://s4.postimg.org/5ywkdwsq5/divider.png')no-repeat; width: 300px;...

JavaScript

$(document).ready(function() {
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;
});
}
}
});

});