JSFiddle - React, Tailwind, and code Playground

by Dan Vassallo

HTML

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  <title></title>
  <style>
    body{
      max-width: 600px;
      margin: 0 auto;
      font-family: 'Source Sans Pro', sans-serif;
      background-color: white;
    }
    .delimiter{
      color: #b5b5b5;
      margin: 20px auto;
      text-align: center;
    }
    .footer{
      text-align: center;
      color: white;
      background-color: black;
      min-height: 50px;
      padding: 10px;
    }
    .small-gradient{
       margin-top: 20px;
       background-image: url("https://s3-us-west-2.amazonaws.com/zendesk-vydia/gradientsmaller.png");
       height: 7px;
       border-top: 20px solid black;
    }
    .footer-image{
      margin-top: 10px;
    }
    .copyright{
      font-size: 12px;
      margin: 0 auto;
      padding-bottom: 20px;
    }
    .socials{
      padding-top: 10px;
      margin: 0 auto;
    }
    .icon{
      padding: 0 2px;
    }
    .content-wrapper{
      margin: 20px auto;
    }
    .logo{
      width: 100%;
      height:auto;
    }
    .logo-area{
      width: 40%;
    }  
  </style>
</head>
<body>
  <div>
    <div class="delimiter">
      {{delimiter}}
    </div>
    <div class="header-wrap">
      <div class="logo-area">
        <img class="logo" src="https://s3-us-west-2.amazonaws.com/zendesk-vydia/logo.jpg">
      </div>
      <div class="info-area">
      
      </div>
    </div>
    <img src="https://s3-us-west-2.amazonaws.com/zendesk-vydia/gradient.png">
    <div class="content-wrapper">    
    </div>  
      {{content}}
    </div>
    <div class="small-gradient"></div>
    <div class="footer">
      <p class="socials">Join us on Social Media</p>
      <p class="socials"><a href="https://www.facebook.com/VydiaOfficial" target="_blank"><img class="icon" src="https://s3-us-west-2.amazonaws.com/zendesk-vydia/fbicon.png"></a> <a href=""...