JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<div class="jsx-2477408420 deploy-button">
  <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fnuxtjs&amp;template=nuxtjs" target="_blank" rel="noopener noreferrer" class="jsx-2477408420">
    <button role="button" type="submit" class="jsx-4045232362 jsx-3448402477 button icon-color geist-themed geist-success geist-success-fill">
      <span class="jsx-4045232362 jsx-3448402477 icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 113 100" shape-rendering="crispEdges">
          <defs>
            <linearGradient x1="196.57%" y1="228.82%" x2="50%" y2="50%" id="a">
              <stop offset="0%"></stop>
              <stop stop-color="#FFF" offset="100%"></stop>
            </linearGradient>
          </defs>
          <path d="M350.5 150L407 250H294z" transform="translate(-294 -150)" fill="#fff" fill-rule="evenodd"></path>
        </svg>
      </span>
      <span class="jsx-4045232362 jsx-3448402477 text">Open in Gitpod</span>
    </button>
  </a>
</div>

<style type="text/css">
a { color: #fff; text-decoration: none; }
.button.jsx-3448402477 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-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;
  z-index: 0;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none !important;
  line-height: 38px;
  white-space: nowrap;
  font-weight: 500;
  font-family: var(--font-sans);
  min-width: 120px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--geist-radius);
  font-size: 0.875rem;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
 ...

CSS

.stack_stack__1lnqs {
  display: flex;
  flex-direction: var(--direction,column);
  align-items: var(--align,stretch);
  justify-content: var(--justify,flex-start);
  flex: var(--flex,initial)
}

.stack_debug__3NhGn {
  background-color: var(--geist-success-lighter)
}

.stack_debug__3NhGn .stack_debug__3NhGn {
  background-color: var(--geist-error-lighter)
}

.stack_debug__3NhGn .stack_debug__3NhGn .stack_debug__3NhGn {
  background-color: var(--geist-warning-lighter)
}

.stack_debug__3NhGn .stack_debug__3NhGn .stack_debug__3NhGn .stack_debug__3NhGn {
  background-color: var(--geist-violet-lighter)
}

.stack_debug__3NhGn .stack_debug__3NhGn .stack_debug__3NhGn .stack_debug__3NhGn .stack_debug__3NhGn {
  background-color: var(--geist-cyan-lighter)
}

@media screen and (min-width: 961px) {
  .stack_stack__1lnqs {
    --direction:var(--lg-direction);
    --align: var(--lg-align);
    --justify: var(--lg-justify)
  }
}

@media screen and (min-width: 601px) and (max-width:960px) {
  .stack_stack__1lnqs {
    --direction:var(--md-direction);
    --align: var(--md-align);
    --justify: var(--md-justify)
  }
}

@media screen and (max-width: 600px) {
  .stack_stack__1lnqs {
    --direction:var(--sm-direction);
    --align: var(--sm-align);
    --justify: var(--sm-justify)
  }
}

.with-git-icon-background_background__3MFx6 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 100%;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #fff
}

.with-git-icon-background_background__3MFx6[data-git-type=bitbucket] {
  background-color: #0052cc
}

.with-git-icon-background_background__3MFx6[data-git-type=bitbucket] svg {
  transform: scale(.65);
  color: #fff
}

.with-git-icon-background_background__3MFx6[data-git-type=gitlab] {
  background-color: #6b4fbb
}

.with-git-icon-background_background__3MFx6[data-git-type=gitlab] svg {
  transform: scale(.75)
}

.command_listWrapper__3QMko {
  overflow-y: auto;
  transition:...