JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<div id="a-demo-runner" class="a-demo-embedder ar-cursor-0">
  <div class="ar-runner" style="width: 320.254px; height: 653px; margin: auto;"><img class="ar-frame" src="https://www.appdemostore.com/img/frame/apple_iphone_6_white_v.png" style="width: 320.254px; height: 653px;">
    <div class="ar-home" style="top: 587.511px; left: 138.55px; width: 43.5333px; height: 43.5333px;"></div>
    <div class="ar-demo" style="width: 283.913px; height: 504.987px; left: 17.7919px; top: 73.4388px;">
      <div class="ar-screens" style="width: 283.913px; height: 504.987px;">
        <div class="ar-screen" style="width: 283.913px; height: 504.987px; z-index: auto; background-color: rgb(233, 233, 233); display: block;">
          <div class="ar-o2 vi" style="width: 283.913px; height: 302.841px; top: 101.073px; left: 0px; display: block;"></div>
          <div class="ar-o2 vi" style="width: 283.913px; height: 504.987px; top: 0px; left: 0px; display: block;">
            <iframe src="https://www.youtube-nocookie.com/embed/ULqTvwORQfc?playsinline=1&amp;amp;modestbranding=1&amp;amp;rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay=1&amp;amp;loop=1"></iframe>
          </div>
        </div>
      </div>
      <div class="ar-demo-panel">
        <div class="a-close"></div>
      </div>
      <div class="ar-demo-loading" style="display: none;">
        <div class="a-loader white"></div>
      </div>
    </div>
  </div>
</div>

CSS

@CHARSET "UTF-8";.d-list{border-style:none}.d-list-item{border-bottom:1px solid #eee;padding:2px 10px;cursor:default}.d-list-h .d-list-item{display:inline-block;border-bottom:0 none;border-right:1px solid #eee}.d-list-item:hover{background-color:#ffb88f}.d-list-item-sel,.d-list-item-sel:hover{background-color:#f84}.d-colorpicker{font-size:12px;display:inline-block}.d-colorpicker-div{white-space:nowrap}.d-colorpicker hr{color:#fff}.d-colorpicker-c{display:inline-block;margin:1px;width:10px;height:10px;cursor:pointer}.d-colorpicker input{font-family:monospace;font-size:10px;padding:0 2px;text-align:center;width:100%}.d-colorpicker-recent{float:right}*{box-sizing:border-box}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.1)}::-webkit-scrollbar-thumb{border-radius:10px;background-color:rgba(10,120,255,0.6)}html{font-family:'Montserrat',sans-serif;font-size:13px;letter-spacing:.5px;height:100%}body{margin:0;height:100%;color:#444;background-color:#f6f6f6}body.demo{height:100%;background-color:transparent}section{padding:30px 0;clear:both}.txt-s{font-size:11px;letter-spacing:.5px}.txt-m{font-size:13px;letter-spacing:.5px}.txt-l{font-size:20px;letter-spacing:1.5px}.txt-caps-s{font-size:11px;letter-spacing:.5px;text-transform:uppercase}.txt-caps-m{font-size:11px;font-weight:bold;letter-spacing:2.5px;text-transform:uppercase}small{font-size:11px;letter-spacing:.5px;opacity:.7}h1,h2,h3{font-size:20px;font-weight:normal;letter-spacing:1.5px;text-transform:uppercase}h4,h5{font-size:13px;font-weight:normal;letter-spacing:.5px;text-transform:uppercase}h6{font-size:11px;font-weight:normal;letter-spacing:.5px;text-transform:uppercase}h1{margin:40px 0 30px}h2{margin:40px 0 20px}h3{margin:20px 0 15px}h4{margin:15px 0 10px}h5{margin:10px 0 5px}h6{margin:10px 0 5px}p{line-height:24px}ul,ol{line-height:24px}a{color:#0a78ff;text-decoration:none}a:hover{color:#0759bd}.a-top{color:#29245c;padding-top:0;padding-bottom:0}.a-top p{margin:20px...