JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<style type="text/css">

      @media screen and (min-width: 780px) {
        .content.jsx-824000771 {
          grid-template-columns:auto 1fr auto;
          padding-left: 10px;
          padding-right: 15px;
        }

        .ctas.jsx-824000771 {
          -webkit-align-self: stretch;
          -ms-flex-item-align: stretch;
          align-self: stretch;
          display: grid;
          grid-column-gap: var(--deprecated-spacing-1);
          grid-auto-flow: column;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
      }
    </style>
    <style id="__jsx-641667485">
      button.jsx-641667485 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: var(--deprecated-font-size-desktop-text-medium);
        font-family: var(--deprecated-font-family-sans-serif);
        border-radius: var(--deprecated-border-radius-2);
        cursor: pointer;
        outline: 0;
        padding: var(--deprecated-spacing-2);
        text-align: center;
        -webkit-transition: 0.1s all ease-in-out;
        transition: 0.1s all ease-in-out;
        font-weight: var(--deprecated-font-weight-medium);
        width: auto;
        white-space: nowrap;
        line-height: var(--deprecated-font-size-desktop-text-medium);
      }

      button.primary.jsx-641667485 {
        background-color: var(--accent-primary-default);
        border: 1px solid var(--accent-primary-default);
        color: var(--white);
      }

      button.primary.jsx-641667485:hover {
        background-color: var(--accent-primary-default);
        border: 1px...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
   background-color: var(--background-highest);
}
.page.jsx-627969981 {
  overflow-x: hidden;
  position: relative;
  background-color: var(--background-highest);
  min-height: calc(100vh - 60px);
  color: var(--foreground-primary);
  -webkit-scroll-behavior: smooth;
  -moz-scroll-behavior: smooth;
  -ms-scroll-behavior: smooth;
  scroll-behavior: smooth;
}
.main-graphic.jsx-2581672867 {
  display: block;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  position: relative;
  width: 100%;
  margin-top: var(--spacing-5);
  height: 400px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}
.filetree.jsx-2581672867, .editor.jsx-2581672867, .shell.jsx-2581672867 {
  border-radius: var(--border-radius-2);
  box-shadow: var(--shadow-3);
  padding: var(--spacing-1);
  border: 1px solid var(--border);
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 75%;
}
.filetree.jsx-2581672867 {
  position: absolute;
  left: 5%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 300px;
  background-color: var(--background-default);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(30deg);
  -ms-transform: rotateX(30deg);
  transform: rotateX(30deg);
}
.file-node.jsx-2581672867 {
  width: 100%;
  color: var(--foreground-higher);
  background-color: var(--control-3);
  padding: var(--spacing-1);
  border-radius: var(--border-radius-2);
}
.file-node.active.jsx-2581672867 {
  background-color: #15559e;
  color: var(--foreground-primary);
  box-shadow: 0px 4px 0px #155fb4,var(--shadow-3);
  font-weight:...