JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<!DOCTYPE html>
<!--  This site was created in Webflow. http://www.webflow.com  -->
<!--  Last Published: Wed Sep 19 2018 23:31:11 GMT+0000 (UTC)  -->
<html data-wf-page="5ba2d76d58dc49a33744ee0d" data-wf-site="5ba2d76d58dc4955b344ee08">
<head>
  <meta charset="utf-8">
  <title>Business template - Webflow HTML website template</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/justins-exceptional-project-cfbfa1.webflow.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">WebFont.load({  google: {    families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Libre Franklin:200,300,regular,600,800,900","IBM Plex Mono:regular"]  }});</script>
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon">
  <style>
  body {
  -moz-font-feature-settings: "liga" on;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" on;
  text-rendering: optimizeLegibility;
}
</style>
</head>
<body class="body">
  <div class="navigation"></div>
  <div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease-out"...

CSS

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  line-height: 44px;
  font-weight: bold;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: bold;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: 'Libre Franklin', sans-serif;
  color: #000;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: 'Libre Franklin', sans-serif;
  color: #000;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
}

h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
}

p {
  margin-bottom: 10px;
}

ul {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}

ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'IBM Plex Mono', sans-serif;
  color: #000;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

img {
  display: inline-block;
  max-width: 100%;
}

blockquote {
  margin-bottom: 10px;
  padding: 10px 20px;
  border-color: #5ab963 #5ab963 #5ab963 #e6e6e6;
  border-left-style: solid;
  border-left-width: 5px;
  font-family: 'IBM Plex Mono', sans-serif;
  color: #000;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

figcaption {
  margin-top: 5px;
  text-align: center;
}

.navigation {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 10px;
  margin-left: 10px;
  padding-right: 10px;
  padding-left: 10px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
 ...