JSFiddle - React, Tailwind, and code Playground

by Koubenec

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-bbq/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="sticky.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script src="lazyline.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<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 features-page-style">
  <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-->
<!--Metrics-->
<div class="full-wrap">
<div class="grid grid-pad">
  <h3>Metrics that matter</h3>
    <h1>Focus on the Important</h1>
    <section class="col-1-1">
      <div class="content">
      
      <ul>
        <li id="circle1"><div class="features-page-cirlce-style"><img class="metrics-icon"...

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;}
 /* Fonts */
@font-face {
	font-family: 'Conv_FuturaStd-Bold';
	src: url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Bold.eot.eot?#iefix') format('embedded-opentype'), 
	     url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Bold.woff') format('woff'), 
	     url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Bold.ttf')  format('truetype'),
	     url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Bold.svg#Conv_FuturaStd-Bold') format('svg');
}
@font-face {
	font-family: 'Conv_FuturaStd-Book';
	src: url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Book.eot.eot?#iefix') format('embedded-opentype'), 
	     url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Book.woff') format('woff'), 
	     url('http://www.marcatectura.com/examples/twenty20/testbed/v3/signup/FuturaStd-Book.ttf')  format('truetype'),
	    ...