JSFiddle - React, Tailwind, and code Playground

by Mariel Temblor

HTML

<body style="background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;">
<div id="container"> <!--wrapper-->
	<header id="header">
    	<div id="menu" class="menu"> <!--navMenu-->
		<nav class="navbar navbar-default">
        	<ul>
                <li><a href="index.php" > HOME </a></li>
                <li>OUR PRODUCT
				<ul> 
					<li><a href="productOverview.php" > PRODUCT OVERVIEW</a></li>
					<li><a href="usage.php" > CHEESECLOTH USAGE</a></li>
					<li><a href="reviews.php" > PRODUCT REVIEWS </a></li>
				</ul>
				</li>
				<li> SUGGESTIONS 
				<ul>
					<li><a href="tips.php" > TIPS and IDEAS </a></li>
					<li><a href="recipe.php" > RECIPES </a></li>
					<li><a href="ideas.php" > NEWS and EVENTS </a></li>
				</ul>
				</li>
				<li><a href="about.php" > ABOUT US </a> </li>
				<li><a href="contact.php" > CONTACT US </a> </li>
        	</ul> 
			<br class="clearFloat" />
			</nav>
        </div>
</header>

<section id="content">

	
	<div id="overview">
		
	<center>
	<h2>- ABOUT THE PRODUCT -</h2>
			<h1> The Perfect Holiday  <b style="color:red; font-family: IM FELL DW Pica PRO; font-size:50px">CHEESECLOTH </b></h1>
			<h4> The most versatile cheesecloth you will ever own </h4>
			<br />
			<p><img src="images/h.jpg" style="width: auto; height: auto;max-width: 700px; margin-top:-4em; border: 1px #000" > </p>
			<br />
			<h3> Cooking </h3>
			<h5> ThanksGiving and Christmas Holiday are slowly approaching<br /> <b style="font-size: 18px">
Are you tired of eating dry turkey for your holidays meals? </b></h5>
			<p style="color:red" class = "vital"> Chefs across the world (including almost all celebrity chefs) will recommend using soaked Cheesecloth to keep your holiday meats perfectly juicy and eliminate the inconvenience of basting. Basting also causes heat to escape from your convection oven and can cause cooking times to vary immensely. Cook it right every time with cheesecloth! </p>
			<p> The Perfect Holiday Cheesecloth will make...

CSS

.fmenu,
.push {
  height: 4em;
  clear: both;
}
/*ends here */

body {
  background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
  font-family: Avenir !important;
  font-size: 12pt;
  line-height: 20px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header {
  background: url(images/header.jpg) no-repeat;
  min-height: 270px;
  overflow: hidden;
  background-size: 100%;
}
#content {
  float: left;
  width: 100%;
  margin-top: -101px;
  background: #fff;
  position: relative;
}
#img {
  margin: 5px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
#img img {
  display: inline;
  margin: 5px;
  border: 1px solid #ffffff;
}
#desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
#container {
  width: 826px;
  margin: 0 auto;
  box-shadow: 0 0 5px 1px #ccc;
}
#menu {
  margin: 0;
  padding: 0;
}
#menu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  margin-left: 35px;
  margin-top: 139px;
}
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background: #fff;
}
#menu ul li a {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  margin-left: 10px;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
  text-align: center;
  margin-left: 0px;
}
#menu ul li ul {
  margin-top: -5px;
}
#menu ul li ul li {
  margin-top: -2px;
  margin-left: -35px;
  position: relative;
}
#menu ul ul {
  position: absolute;
  top: 32px;
}
#menu ul li:hover ul {
  z-index: 1;
}
/*******************************/

#menu...

JavaScript

/*Coverflow Image Gallery By Dynamic Drive
* Created: Jan 14th', 2015 by DynamicDrive.com.
* Dependencies: jQuery, Sly scrolling lib https://github.com/darsain/sly
* Visit http://www.dynamicdrive.com/ for full source code
*/


document.getElementsByTagName('html')[0].className += ' ' +
	("ActiveXObject" in window? 'ie' : 'no-ie')


function coverflowimages(options){
	if ( !document.getElementById('coverflowoverlay') ){
		var $overlay = $('<div id="coverflowoverlay" />').appendTo(document.body)
		var $enlargearea = $('<div id="coverenlargearea" />').appendTo(document.body)
	}
	else{
		var $overlay = $('#coverflowoverlay')
		var $enlargearea = $('#coverenlargearea')
	}
	var $body = $(document.body)
	var $overlayenlarge = $overlay.add($enlargearea)
	var $wrap  = $('#' + options.coverid)
	var $frame = $wrap.find('div.frame:eq(0)')
	var frameinnerHTML = ''
	var activeitem = -1
	var onselecteditemclick = options.onselecteditemclick || selecteditemaction

	var preloadimages = []
	for (var i = 0; i<options.images.length; i++){
		if (options.images[i][1]){
			if (options.preloadlarge){
				preloadimages[i] = new Image()
				preloadimages[i].src = options.images[i][1]
			}
		}
		frameinnerHTML += '<li style="background-image:url(' + options.images[i][0] + ')" data-itemindex="' + i +'"></li>\n'
	}
	$frame.find('ul:eq(0)').html( frameinnerHTML )

	function selecteditemaction(e, activeitem){ // default call back function for onselecteditemclick, showing enlarged image
		$overlay.css({opacity:.9, zIndex: 1000})
		$enlargearea.html('<img src="' + options.images[activeitem][1] + '"/>' + 
			((options.images[activeitem][2])? '<div id="desc">' + options.images[activeitem][2] +'</div>': '')
		)

		var maxheight = $(window).height()
		$enlargearea.css({opacity:1, zIndex: 1001})
		.data('isvisible', true)
		.find('img:eq(0)')
			.css({maxWidth: $(window).width() * .95, maxHeight: $(window).height()})
		e.stopPropagation()

	}
	
	// Call Sly on frame. See...