JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css"/>
<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>

</head>
<body style="
margin:0;
padding:0;
width:1200px;
height:1600px;
background-color:#00A7FF;
transform: scale(0.3);
">


<div style="margin:0 auto; padding:50px 50px;">
<img src="https://paiza.jp/images/ds/logo/paiza/framed.svg" width="250px" height="auto" style="margin:0 auto 20px; display:block;">

<div style="
padding:0;
border-radius:16px;
background: linear-gradient(-65deg, #222 70%, #333 71%, #333);
overflow:hidden;
">

<div style="padding:40px; display:flex; flex-wrap: wrap; gap: 0 20px; background-color:#00000099;">
<div style="width:26px; height:26px; border-radius:13px; background-color:#EC6A5E;"></div>
<div style="width:26px; height:26px; border-radius:13px; background-color:#F4BD4F;"></div>
<div style="width:26px; height:26px; border-radius:13px; background-color:#61C454;"></div>
</div>

<div style="padding:40px;　">

<div style="margin:0 0 80px;">
<div style="margin:0 0 20px; border-radius:40px; padding:8px 24px; font-size:24px; font-weight:bold; display:inline-block; background-color:#CCCCCCCC;">
#output
</div>

<pre style="margin:0; padding:0; border:0; color:#F00; font-size:32px; font-weight:bold;">${stdout}</pre>

</div>

<div style="margin:0 0 80px;">
<div style="margin:0 0 20px; border-radius:40px; padding:8px 24px; font-size:24px; font-weight:bold; display:inline-block; background-color:#CCCCCCCC;">
${prism_language}
</div>

<pre style="margin:0; padding:0; border:0; font-size:32px;"><code class="language-${prism_language}">${source_code_html_entities}</code></pre>
</div>




</div>
</body>
</html>