JSFiddle - React, Tailwind, and code Playground

by Connel Asikong

HTML

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/css/tachyons.min.css">
<script src="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&quot;&gt;"></script>
<main class="w-100" style="font-family: 'Open Sans',sans-serif;">
    	<!-- Header -->
    	<header class="w-100 ph2 ph5-ns">
    		<div class="w-100 pv2 cf">
    			<div class="dtc-l v-mid fl w-70 w-20-l">
					<a class="dib pt2 mr2 link black-80 calisto" title="ImageKit.cb" href="index.html">
						<img src="https://ik.imagekit.io/demo/imagekitwebsite/static/build/img/logo-dark.png?hash=a498f59e8058270aa124971fd3c79653">
					</a>
				</div><div class="main-nav w-80-l fl">
					<div class="w-100 w-70-l fl v-top bgColors">
						<a href="features.html" class="f6 fw5 bgColor br2 pa2 link pointer ttu mv2 mv0-l mr2 mr3-m mr4-l db dib-l no-underline">Features</a>
						<a href="#" class="f6 fw5 bgColour white br2 pa2 link pointer ttu mv2 mv0-l mr2 mr3-m mr4-l db dib-l">Pricing</a>
						<a href="website-analyzer.html" class="f6 fw5 bgColor br2 pa2 link pointer ttu mv2 mv0-l mr2 mr3-m mr4-l db dib-l no-underline">Website Analyzer</a>
						<a href="docs.html" class="f6 fw5 bgColor hover-white br2 pa2 link pointer ttu mv2 mv0-l mr2 mr3-m mr4-l db dib-l no-underline">Documentation</a>
					</div><div class="fl w-100 w-30-l tl tc-l v-top bgColors">
						<a href="login.html" class="f6 fw5 bgColor hover-white br2 pa2 link pointer ttu mv2 mv0-l mr2 mr3-m mr4-l db dib-l no-underline">Login</a>
						<a href="signup.html" class="f6 fw5 bgColor hover-white br2 pa2 link pointer ttu mv2 mv0-l mr2 mr3-m mr4-l db dib-l no-underline">Sign up</a>
					</div>
				</div>
				<a href="#" class="responsive-menu-open">
					<img src="https://ik.imagekit.io/demo/imagekitwebsite/static/build/img/landingpage-icons/hamburger-blue.svg?hash=6fe180f63f79722c18ca94928f9d779f">
				</a>
    		</div>
    	</header>
    	<div...

CSS

.bgs {
  background: #F4F5F8;
}

.btn {
  border-radius: 3px;
  display: block;
  text-align: center;
  cursor: pointer;
  color: white;
  outline: none;
  line-height: 60px;
  width: auto;
  min-width: 170px;
  padding: 0 20px;
  transition-duration: 150ms;
  background-color: #3E82F7;
  border: solid 1px transparent;
}

.footColor {
  background: #262B37;
}

.close-box, .open-info {
		    display: none;
		}

.closeInfo {
  transform: rotateX(180deg);
}

.responsive-menu-open {
  font-size: 21px;
  color: #353537;
  padding: 0 24px;
  line-height: 34px;
  height: 44px;
  float: right;
  display: none;
}

.responsive-menu-open:hover {
  color: #5d6e7b;
}

.responsive-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100%;
  min-width: 100%;
  background: #fff;
  z-index: 999;
  overflow-y: scroll;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -o-transition: .25s;
  -ms-transition: .25s;
  transition: .25s;
}

.responsive-menu.open {
  left: 0;
}

.responsive-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 30px;
}

.responsive-menu-close:hover {
  color: #5d6e7b;
}

@media screen and (min-device-width: 1200px) {
  .bgColour {
    background: #262B37;
  }
  .bgColor {
    color: #333333;
  }
  .bgColor:hover {
    background: #262B37;
    color: #fff;
  }
}

@media all and (max-width: 1200px) {
  .main-nav {
    display: none;
  }
  .responsive-menu-open {
    display: inline-block;
  }
}

@media all and (max-width: 768px) {
  .header .top span,
  .header .top .links {
    float: none;
  }
  .header .top a {
    margin-left: 0;
    margin-right: 18px;
  }
  .responsive-menu-open {
    padding-right: 22px;
  }
  .bgColors {
    background: #262B37;
  }
  .bgColor {
    color: #fff;
  }
  .bgColor:hover {
    color: #fff;
  }
}

JavaScript

/*==========  Responsive Navigation  ==========*/
		$('.main-nav').children().clone().appendTo('.responsive-nav');
		$('.responsive-menu-open').on('click', function(event) {
			event.preventDefault();
			$('body').addClass('no-scroll');
			$('.responsive-menu').addClass('open');
			return false;
		});
		$('.responsive-menu-close').on('click', function(event) {
			event.preventDefault();
			$('body').removeClass('no-scroll');
			$('.responsive-menu').removeClass('open');
			return false;
		});


		var len = $(".customers a").length;

	    setTimeout(function() {
	        moveCusSlider(3);
	    },15000);

	    function moveCusSlider(i) {
	        if(i>len) i = 0;
	        $(".customers").animate({scrollLeft:i*210}, 500);
	        if(i==0) i=1;
	        setTimeout(function() {
	            moveCusSlider(i*3);
	        }, 3000);
	    }

	    function hide ($container) {
		  $container.find('.open-box').show();
		  $container.find('.close-box').hide();
		  $container.find('.open-info').slideToggle(false);
		}

		$('.open-box').click(function() {
		  // hide previous
		  var $prevContainer = $('.close-box:visible').parent();
		  hide($prevContainer);
		  
		  // show current
		  var $container = $(this).parent();
		  $container.find('.open-box').hide();
		  $container.find('.close-box').show();
		  $container.find('.open-info').slideToggle(true);
		});

		$('.close-box').click(function() {
		  // hide current
		  var $container = $(this).parent();
		  hide($container);
		});