JSFiddle - React, Tailwind, and code Playground

by Elodie Be

HTML

<script src="jquery.min.js"></script>
<div id="page">
<header id="header-desktop" class="has-fadeEffect">
  <div class="header-nav has-fadeEffect">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 clearfix">
					<ul class="list-unstyled list-inline main-nav main-nav-left">
						<li><a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-1">Panel #1</a></li>
						<li><a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-2">Panel #2</a></li>
            <li><a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-3">Panel #3</a></li>
					</ul>
				</div><!--/col-->
			</div><!--/row-->
		</div><!--/container-->
	</div><!--/header-nav-->
	
	<div class="header-panel has-fadeEffect">
		<div id="header-panel-1" class="header-panel-submenu  has-fadeEffect">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 clearfix">
						<p class="header-panel-title">Panel #1</p>
						<span class="header-panel-close js-flip-header-back"><span class="hidden">x CLOSE</span></span>
					</div><!--/col-->
				</div><!--/row-->
			</div><!--/container-->
			<div class="main-nav-submenu">
				<ul class="list-unstyled clearfix">
					<li><a href="#">Lorem</a></li>
					<li><a href="#">Ipsum</a></li>
					<li><a href="#">Vestib</a></li>
				</ul>
			</div>
		</div><!--/header-panel-1-->
		
		<div id="header-panel-2" class="header-panel-submenu">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 clearfix">
						<p class="header-panel-title">Panel #2</p>
						<span class="header-panel-close js-flip-header-back"><span class="hidden">x CLOSE</span></span>
					</div><!--/col-->
				</div><!--/row-->
			</div><!--/container-->
			<div class="main-nav-submenu">
				<ul class="list-unstyled clearfix">
					<li><a href="#">Lorem</a></li>
					<li><a href="#">Ipsum</a></li>
					<li><a...

CSS

html, body, div, a, ul, li {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0; margin:0;}
*:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
li {display: inline-block;padding-left: 0; list-style: none; }
body {font-size: 16px; background-color: #f7f7f7;font-family:Arial;}
.container {margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;}
.row {margin-left: -15px; margin-right: -15px;}
.col-xs-12 {width: 100%;}

#page {
  padding-top: 120px; 
  margin: 0 auto; 
  position: relative;
}
.content {
  position: relative;
  z-index: 998;
  padding:10px;
}
#header-desktop {
  background: #fff;  
  z-index: 999;
  height: 120px;
  width:100%; 
  position: fixed;
  left: 0; 
  right: 0; 
  top: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; 
  transition:transform .4s linear; 
  -webkit-transition:transform .4s linear;
}
#header-desktop.is-flipped{
  transform:rotateX(90deg);
  -webkit-transform:rotateX(90deg);
}
.header-nav,
.header-panel {
  width:100%; 
  height:120px;
  position: relative;
}
.header-nav {
  background-color:#fff; 
  transform:translateZ(60px); 
  -webkit-transform:translateZ(60px);
}
.header-panel {
  background-color:#fff; 
  transform:rotateX(-90deg) translateZ(-60px); 
  -webkit-transform:rotateX(-90deg) translateZ(-60px);
}
#header-desktop.is-flipped .header-nav {
  background-color:#e7e7e7;
}
.header-panel-submenu {
  width: 100%; 
  height: 0;
  overflow: hidden;
}
.header-panel-submenu.is-open {
  height: 500px;
}
.header-panel-close {
  position: absolute; 
  display: inline-block; 
  right: 36px; 
  top: 48px; 
  cursor: pointer; 
}


.main-nav {
  display: inline-block;
  margin: 0;
}
.main-nav li {
  margin:0 5px;
}
.main-nav > li > a {
 ...

JavaScript

jQuery(document).ready(function($) {
	    $(".js-flip-header").click(function() {
	        $("#header-desktop").toggleClass("is-flipped");
	    });
	    $(".js-flip-header-back").click(function() {
	    	$(this).closest('.header-panel-submenu').removeClass("is-open")
	        $("#header-desktop").removeClass("is-flipped");
	    });
	});
  
  
  $(document).ready(function(){
  $('.js-target-submenu').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('.js-target-submenu').removeClass('is-open');
    $('.header-panel-submenu').removeClass('is-open');
    $(this).addClass('is-open');
    $("#"+tab_id).addClass('is-open');
  })
})