JSFiddle - React, Tailwind, and code Playground

by akiyamka

HTML

<!-- frame: Board -->
<div class="frame board-5195e3a1cb66">
  <!-- frame: Header -->
  <div class="frame header-5197024d698b">
    <!-- text: HELLO WORLD -->
    <div class="shape text hello-worl-5196367d1c1d">
      <div class="text-node-html" id="html-text-node-e8a7dca2-85d3-8098-8004-5196367d1c1d" data-x="118.99999999999909" data-y="-73">
        <div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
          <div class="paragraph-set root-0-paragraph-set-0">
            <p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="auto"><span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(255, 255, 255, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;text-rendering:geometricPrecision;caret-color:rgba(255, 255, 255, 1);text-decoration:none;--font-id:gfont-sora;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#ffffff&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-size:24px;font-family:&quot;Sora&quot;;font-style:normal;font-weight:800">HELLO WORLD</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- frame: Main -->
  <div class="frame main-519fc9ec4928">
    <!-- frame: Content -->
    <div class="frame content-519eaa453d60">
      <!-- frame: h1 -->
      <div class="frame h1-51a44b62835c">
        <!-- text: Header -->
        <div class="shape text header-519ed3d9093b">
          <div class="text-node-html" id="html-text-node-e8a7dca2-85d3-8098-8004-519ed3d9093b" data-x="118.99999999999909" data-y="2">
            <div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
              <div class="paragraph-set root-0-paragraph-set-0">
                <p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="auto"><span class="text-node root-0-paragraph-set-0-paragraph-0-text-0"...

CSS

/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://design.penpot.app/internal/gfonts/font/sora/v12/xMQOuFFYT72X5wkB_18qmnndmSdSnk-DKQJRBg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://design.penpot.app/internal/gfonts/font/sora/v12/xMQOuFFYT72X5wkB_18qmnndmSdSnk-NKQI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(https://design.penpot.app/internal/gfonts/font/sora/v12/xMQOuFFYT72X5wkB_18qmnndmSeMmU-DKQJRBg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(https://design.penpot.app/internal/gfonts/font/sora/v12/xMQOuFFYT72X5wkB_18qmnndmSeMmU-NKQI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(https://design.penpot.app/internal/gfonts/font/sora/v12/xMQOuFFYT72X5wkB_18qmnndmSdgnk-DKQJRBg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,...