JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<body>


<!--<div class="borderslider">-->
    <div class="flexslider">
    
  <!--   <div id="testo-header"><img src="http://www.piedicosta.com/jnuovo/templates/template_piedicosta/images/logo-homeslider.png"></div> -->
    		
            
            <!-- Inizio Main Navigation -->
            <div class="mainnavigation">
            	
                <div class="logopdc">
                <img class="flexlogo" src="http://www.piedicosta.com/jnuovo/templates/template_piedicosta/images/logo-pdc-bianco.png">
                <img class="flexlogoblk" src="http://www.piedicosta.com/jnuovo/templates/template_piedicosta/images/logo-pdc-blk.png">
                </div>
            



		<div class="cssplay_overlay"></div>

		<div class="cssplay_menu cssplay_responsive" data-mobile="1024">

			<ul><li class="close">CLOSE</li>

				<li><a href="index.html">Home</a></li>

				<li class="has-sub"><a href="index.html">Contact Us</a><b aria-haspopup="true" aria-controls="p1"></b>

					<ul id="p1">

						<li><a href="index.html">Email</a></li>

						<li><a href="index.html">Telephone</a></li>

						<li><a href="index.html">Online Form</a></li>

						<li><a href="index.html">Snail Mail Address</a></li>

					</ul>

				</li>

				<li class="has-sub"><a href="index.html">Resort</a><b aria-haspopup="true" aria-controls="p2"></b>

					<ul id="p2">

						<li><a href="index.html">Ski Hire Facilities</a></li>

						<li class="has-sub"><a href="index.html">Main Ski Slopes</a><b aria-haspopup="true" aria-controls="p3"></b>

							<ul id="p3">

								<li><a href="index.html">Beginners Slopes</a></li>

								<li><a href="index.html">Intermediate Slopes</a></li>

								<li class="has-sub"><a href="index.html">Advanced Skill Levels</a><b aria-haspopup="true" aria-controls="p4"></b>

									<ul id="p4">

										<li><a href="index.html">Local</a></li>

										<li><a href="index.html">Nearby</a></li>

										<li><a href="index.html">With...

CSS

/* CSS Document */


/* Header with logo and Navigation */
/*

@media only screen and (min-width:979px){
.logopdc{
	margin:auto;
	text-align:center;
	width:100%;
	}

.logopdc .flexlogo{
	width:300px;
	height:auto;
}

.logopdc .flexlogoblk{
	display:none;
}

}

@media only screen and (max-width:979px){




.logopdc{
	display:none;
	}
.logopdc .flexlogo{
	display:none;
}

.logopdc .flexlogoblk{
	width:300px;
	height:auto;
}

}

/**********************************************************   Navigation   */


.mainnavigation{
	height:150px;
	width:100%;
	margin:auto;
	top:0;
	position:fixed;z-index:99;
	text-align:center;
	padding-top:25px;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	}


.mainnavigation.sticky {
	position: fixed;
	height: 117px; 
	width: 100%;
	padding-top:10px;
	background: #FFF;
}

.mainnavigation.sticky .logopdc{
	margin:auto;
	text-align:center;
	padding:opx;
	}

.mainnavigation.sticky .logopdc .flexlogo{
	display:none;
}
.mainnavigation.sticky .logopdc .flexlogoblk{
	width:200px;
	height:auto;
	display:inline;
}




/* ================================================================ 

This copyright notice must be untouched at all times.



The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu-three.html

Copyright (c) Stu Nicholls. All rights reserved.

This stylesheet and the assocaited (x)html may be modified in any 

way to fit your requirements.

=================================================================== */
/* this is the PC menu stylesheet */

.cssplay_overlay {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); display:none; cursor:pointer;z-index:500005;}

.cssplay_menu {width:100%; background:#cedce5; text-align:center; height:45px; position:relative; z-index:100; left:0;}

.cssplay_toggle {display:none;}

.cssplay_menu ul {margin:0; padding:0; list-style:none; white-space:nowrap;...

JavaScript

<!-- Scroll script used for the arrows button to make a smooth scroll of the contents-->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
  $('#freccia-header a').bind('click',function(event){
   var $anchor = $(this);
    $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
    }, 1000);
    event.preventDefault();
   });
});
</script>

    
    
    
    
  <!-- jQuery library for Flexslider -->
  <script>window.jQuery || document.write('<script src="http://www.piedicosta.com/jnuovo/templates/template_piedicosta/js/libs/jquery-1.7.min.js">\x3C/script>')</script>
  
  
  <!-- FlexSlider -->
  <script defer src="http://www.piedicosta.com/jnuovo/templates/template_piedicosta/js/jquery.flexslider.js"></script>
  
  <script type="text/javascript">
    
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "fade",
       
        start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
		before: function(){captionMoveOut();},           //Callback: function(slider) - Fires asynchronously with each slider animation
		after: function(){captionMoveIn();},            //Callback: function(slider) - Fires after each slider animation completes
		end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
		added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
		removed: function(){} 
      });
      
      $('.flex-caption').hide();
      
       $('.flex-caption').fadeIn(2000);
    });
    
    function captionMoveIn() {
		$('.flex-caption')
		.animate({top: "35%"},0)
		.fadeIn(2000)
	;};
	
	
	function captionMoveOut() {
		$('.flex-caption')
		.animate({top: "-40%"},700)
		.fadeOut("normal")
		
	;};
    
  </script>


    
<!-- trasforma il menù in sticky...