JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
  </head>
  <body>
    <style>
      body {
          overflow: hidden;
      }

      body * {
        -webkit-touch-callout: none;
          -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
      }

      #before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
      }

      #after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        margin-top: calc(-100vh / 2 + 140px);
        margin-left: calc(-100vw / 2 + 140px)
        
        /*clip-path: circle(140px at center);
        -webkit-clip-path: circle(140px at center);
        */
      }

      .container {
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 280px;
        height: 280px;
        border-radius: 100%;
        overflow: hidden;
        
        /* Safari overflow hidden + border-radius bug https://hk.saowen.com/a/fd38838b1554e3bc311ebabb7c4cc3d7e44d62a45ba44bc2792172c6cd76c10a */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      .shadow {
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 280px;
        height: 280px;
        border-radius: 999px;
        box-shadow: inset 10px 10px 19px -4px rgba(0,0,0,0.65);
     ...