JSFiddle - React, Tailwind, and code Playground

by Koubenec

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>New Tw20 Layout</title>
</head>
<body>

<div class="top-nav-logo-container">
  <img class="top-nav-logo" src="top_logo.svg" />
</div>
  
<nav class="twenty20bar">
  <ul class="top-nav clearfix">
    <li>Features</li>
    <li>Download</li>
    <li>Get Started</li>
    <li>Login</li>
  </ul>
</nav>

<header class="clearfix">
  <nav id="features-tabs" class="clearfix">
    <a class="features-tab bbq-current" href="#design.html"><span>Design</span><img src="http://www.marcatectura.com/examples/twenty20/testbed/v3/features/design-icon.svg" /></a>
    <a class="features-tab" href="#metrics.html"><span>Metrics</span><img src="http://www.marcatectura.com/examples/twenty20/testbed/v3/features/metrics-icon.svg" /></a>
    <a class="features-tab" href="#predictive.html"><span>Predictive</span><img src="http://www.marcatectura.com/examples/twenty20/testbed/v3/features/predictive-icon.svg" /></a>
    <a class="features-tab" href="#mobile.html"><span>Mobile-First</span><img src="http://www.marcatectura.com/examples/twenty20/testbed/v3/features/mobilefirst-icon.svg" /></a>
  </nav>
</header>

<div class="main-content bbq-content">
<div class="bbq-default">  
<!--Design-->
<div class="full-wrap">
<div class="grid grid-pad">
  <h3>Design</h3>
    <h1>Powered by Sacred Geometry</h1>
    <section class="col-1-3">
      <div class="content">
        <h2>Ecosystem</h2>
        <p>As with the seed of life, all things are related. By looking at your app's ecosystem in its entirety you can see how the success of one of your app's metrics impact one another.</p>
      <p>The outer circles represent the 6 Core Pillars of your app.</p>
      <p>The connections represent the causal relationaship between those pillars.</p>
	  <a class="inline-link">Explore our metrics & analyses</a>
	  </div>
	</section>
	<section class="col-1-3">
	  <div class="content">
      <img src="meta_large_outlined.svg" />
	  </div>
	</section>
	<section...

CSS

/* Meyer Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {content: " "; display: block; height: 0; clear: both;}
/* Features Sheet - header */
/* Layout styling (Twenty20 bar */
img.top-nav-logo {
position: absolute;
z-index: 999;
left: 50%;
margin: 0 0 0 -50px;
width: 100px;
padding: 10px;
background: rgba(0,51,204,1);
border-radius: 50%;
}
nav.twenty20bar ul li {
display: block;
float: left;
width: 25%;
padding: 20px 0;
background: rgba(0,51,204,1);

  font-family: 'Conv_FuturaStd-Book';
  text-transform: uppercase;
  font-size: 18px;
  text-align: center;
  color: white;
}
/* Layout styling (navigation) */
header {
  margin: 0 auto;
  width: 100%;
  background: white;
  border-bottom: 1px solid #d9d9d9;
  position: relative;
  z-index: 3;
}
header nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 0 9px 0;
}
/* Navigation Sticky Style */
.is-sticky nav#features-tabs a.features-tab span {
display: none;
}
header a.features-tab {
  font-family: 'Conv_FuturaStd-Bold';
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  width: 25%;
  float: left;
  
  text-align: center;
  background:...