JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind-dark.min.css">
<header id="animated-background" class="bg-blue-nx-base transform-gpu bg-clip-border bg-right bg-no-repeat bg-origin-border text-white lg:bg-cover h-screen" style="background-image:url(https://nx.dev/images/background/hero-bg-large.svg)">
  <div class="md:py-18 mx-auto max-w-screen-lg px-4 py-4 xl:max-w-screen-xl">
    <div class="md:my-18 my-8 flex flex-col items-center justify-center 2xl:my-24">
      <div class="flex w-full flex-col text-center">
        <h1 class="mb-8 text-4xl font-extrabold leading-none tracking-tight sm:mt-10 sm:mt-14 sm:mb-10 sm:text-5xl lg:text-5xl"><span class="block lg:inline">Smart, Fast and Extensible</span> <!-- -->Build System</h1>
        <h2 class="mx-auto mb-10 max-w-2xl text-2xl font-semibold sm:mb-11">Next generation build system with first class monorepo support and powerful integrations.</h2>
      </div>
      <div aria-hidden="true" class="mx-auto mt-8 hidden w-full max-w-2xl flex-col items-center justify-between pb-10 sm:flex lg:mt-0 lg:pb-0">
        <div class="relative h-96 max-w-full overflow-hidden rounded-lg bg-gray-800 pt-4 pb-6 pt-4 font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg">
          <div class="top mb-2 flex px-5">
            <div class="h-3 w-3 rounded-full bg-red-500"></div>
            <div class="ml-2 h-3 w-3 rounded-full bg-yellow-300"></div>
            <div class="ml-2 h-3 w-3 rounded-full bg-green-500"></div>
          </div>
          <div class="overflow-y-hidden px-5">
            <div style="transform: translateY(-32px) translateZ(0px);">
              <div class="mt-4 flex"><span class="text-green-nx-base mr-2">/workspace ➜</span>
                <p class="typing flex-1 items-center" style="opacity: 1;"><span style="opacity: 1;">n</span><span style="opacity: 1;">p</span><span style="opacity: 1;">x</span><span style="opacity: 1;"> </span><span style="opacity:...

CSS

/* highlight.js - syntax highlighting and tokenization  */
.hljs {
    display: block;
    background: #fff;
    padding: .5em;
    color: #333;
    overflow-x: auto
}

.hljs-comment,.hljs-meta {
    color: #969896
}

.hljs-emphasis,.hljs-quote,.hljs-strong,.hljs-template-variable,.hljs-variable {
    color: #df5000
}

.hljs-keyword,.hljs-selector-tag,.hljs-type {
    color: #d73a49
}

.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol {
    color: #0086b3
}

.hljs-name,.hljs-section {
    color: #63a35c
}

.hljs-tag {
    color: #333
}

.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title {
    color: #6f42c1
}

.hljs-addition {
    color: #55a532;
    background-color: #eaffea
}

.hljs-deletion {
    color: #bd2c00;
    background-color: #ffecec
}

.hljs-link {
    text-decoration: underline
}

.hljs-number {
    color: #005cc5
}

.hljs-string {
    color: #032f62
}

/* animations and keyframe rules */

@keyframes wobble {
    0%, 
		50%, 
		100% { transform: rotate(0deg); }
     25% { transform: rotate(3deg); }
     75% { transform:rotate(-3deg); }
}

.wobble-animation {
    -webkit-animation: wobble 60s linear infinite;
    animation: wobble 60s linear infinite;
}

/* custom colors */

.divide-gray-600>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(75 85 99/var(--tw-divide-opacity))
}

.divide-gray-200>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-divide-opacity))
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-y-hidden {
    overflow-y: hidden
}

.scroll-smooth {
    scroll-behavior: smooth
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.break-normal {
    overflow-wrap: normal;
    word-break: normal
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
   ...