JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">

<table class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="8" data-paste-markdown-skip="" data-tagsearch-lang="JavaScript" data-tagsearch-path="gestures.js">
        <tbody><tr>
          <td id="file-gestures-js-L1" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="file-gestures-js-LC1" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="file-gestures-js-L2" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="file-gestures-js-LC2" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">const</span> <span class="pl-en">listenForGestures</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">gestureActions</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="file-gestures-js-L3" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="file-gestures-js-LC3" class="blob-code blob-code-inner js-file-line">                <span class="pl-k">const</span> <span class="pl-kos">{</span> max<span class="pl-kos">,</span> floor<span class="pl-kos">,</span> tan<span class="pl-kos">,</span> <span class="pl-c1">PI</span><span class="pl-kos">,</span> abs <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-v">Math</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="file-gestures-js-L4" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum"...

CSS

* {
  font-family: 'Open Sans', sans-serif;
}

/*!
 * GitHub Light v0.5.0
 * Copyright (c) 2012 - 2017 GitHub, Inc.
 * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
 */

.pl-c /* comment, punctuation.definition.comment, string.comment */ {
  color: #6a737d;
}

.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
  color: #005cc5;
}

.pl-e /* entity */,
.pl-en /* entity.name */ {
  color: #6f42c1;
}

.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
  color: #24292e;
}

.pl-ent /* entity.name.tag, markup.quote */ {
  color: #22863a;
}

.pl-k /* keyword, storage, storage.type */ {
  color: #d73a49;
}

.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
  color: #032f62;
}

.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
  color: #e36209;
}

.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
  color: #b31d28;
}

.pl-ii /* invalid.illegal */ {
  color: #fafbfc;
  background-color: #b31d28;
}

.pl-c2 /* carriage-return */ {
  color: #fafbfc;
  background-color: #d73a49;
}

.pl-c2::before /* carriage-return */ {
  content: "^M";
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  font-weight: bold;
  color: #22863a;
}

.pl-ml /* markup.list...