JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  html{
    font-size: 64px;
    width: 1200px;
    height: 1600px;
    border:0;
    padding:0;
    margin:0;
  }
  body{
    border:0;
    padding:0;
    margin:0;
  }
  .tab-wrapper{
    font-size: 0.9rem;
  }
  .tab{
    border: 0px solid black;
    display:inline-block;
    background-color: lightgray;
    padding: 1px 10px;
    margin-top: 10px;
    margin-bottom: 0px;
  }
  pre{
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
  }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css"/>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<div style="background-color: deepskyblue; text-align: center;font-size: 2rem;">paiza bot</div>

<div class="tab-wrapper">
<div class="tab">
output
</div>
</div>
<pre style="background-color:#f5f2f0;">${stdout}</pre>

<div style="display: ${(build_error == undefined || build_error === '') ? 'none' : 'block'}">
<div class="tab-wrapper">
<div class="tab">
build_error
</div>
</div>
<pre style="background-color:#f5f2f0;">${build_error}</pre>
</div>

<div style="display: ${(stderr == undefined || stderr === '') ? 'none' : 'block'}">
<div class="tab-wrapper">
<div class="tab">
stderr
</div>
</div>
<pre style="background-color:#f5f2f0;">${stderr}</pre>
</div>

<div class="tab-wrapper">
<div class="tab">
${prism_language}
</div>
</div>
<pre>
<code class="language-${prism_language}">${source_code_html_entities}</code></pre>

</body>
</html>