JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<body class="dark">
  <ion-app>
  <div class="top-content">
    <div class="titles">
      <h1>Cupertino Panes</h1>
      <h2>Picture-in-Picture</h2>
      <div class="container-text">
        <div class="icon">
          <svg aria-hidden="true" role="presentation" data-slug-id="three-dimensional" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0V10.1053H5.05263V5.05263H10.1053V0H0Z" fill="#00C6A2"></path>
            <path d="M37.8945 0V5.05263H42.9472V10.1053H47.9998V0H37.8945Z" fill="#00C6A2"></path>
            <path d="M5.05263 37.8948H0V48H10.1053V42.9474H5.05263V37.8948Z" fill="#00C6A2"></path>
            <path d="M42.9472 42.9474H37.8945V48H47.9998V37.8948H42.9472V42.9474Z" fill="#00C6A2"></path>
            <path d="M24.2106 22.2401L36.7833 15.2506L24.0254 7.89062L11.377 15.1917L24.0506 22.2401H24.2106Z" fill="#0d826c"></path>
            <path d="M10.1982 17.4219V31.8471L22.7288 39.0808V24.3945L10.1982 17.4219Z" fill="#0d826c"></path>
            <path d="M37.8612 17.543L25.2549 24.5493V39.1261L37.8612 31.8503V17.543Z" fill="#0d826c"></path>
          </svg>
        </div>
        <div class="right">
          <small>Make your own floaing panel: wrap your content to the pane with horizontal and vertical moving gestures. Try it out!</small>
        </div>
      </div>
    </div>
  </div>

  
  <ion-content scroll-y="false">
    <ion-drawer>
      <div class="player-container">
        <div class="controls">
          <ion-icon name="refresh"></ion-icon>
          <ion-icon name="play"></ion-icon>
          <ion-icon name="refresh"></ion-icon>
        </div>
        <div class="track"></div>
      </div>
    </ion-drawer>
    <div class="arrows">
      <ion-icon...

CSS

body.dark {
      --cupertino-pane-icon-close-color: #a8a7ae;
      --cupertino-pane-background: #1c1c1d;
      --cupertino-pane-color: #ffffff;
      --cupertino-pane-shadow: 0 4px 16px rgb(0 0 0 / 12%);
      --cupertino-pane-border-radius: 20px;
      --cupertino-pane-move-background: #424246;
      --cupertino-pane-destroy-button-background: #424246;
      --ion-background-color: #1a1b20;
      --ion-background-color-rgb: rgb(26, 27, 32);
      --ion-color-primary: #0078d4;
    } 

    #neo-grid {
      position: absolute;
      top: -650px;
      left: -20%;
      width: 140%;
      height: 260vh;
      display: block;
    }

    @media screen and (max-width: 450px) {
      #neo-grid {
        left: -370px;
        width: 290vw;
      }
    }

    .cupertino-pane-wrapper .pane {
      border-radius: 10px !important;
      background: rgba(0,0,0,.3);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      width: 94%;
      max-width: 250px;
      box-shadow: 0 -30px 80px 0 rgb(0 0 0 / 30%);
      height: 160px !important;
      border: 1px solid rgb(37, 37, 37);
    }

    .cupertino-pane-wrapper .pane ion-drawer {
      width: 100%; 
    }

    ion-drawer {
      display: block;
      width: 94%;
      max-width: 250px;
      margin-bottom: 25px;
    }

    .player-container {
      width: 100%;
      height: 160px;
      position: absolute;
      top: 0;
    }

    .player-container .track {
      height: 2px;
      width: calc(100% - 20px);
      background: rgb(59, 59, 59);
      position: absolute;
      bottom: 10px;
      margin-left: 10px;
    }

    .player-container .controls {
      position: absolute;
      bottom: 18px;
      margin: auto;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .player-container .controls ion-icon {
      font-size: 24px;
      margin: 14px;
    }

    .player-container .controls ion-icon:first-child {
      transform: scale(-1,...

JavaScript

// DOM ready
window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();

  var settings = {
    horizontalOffset: 10,
    horizontal: true,
    initialBreak: 'bottom',
    clickBottomOpen: false,
    breaks: {
      top: { enabled: true, height: window.innerHeight - 10 },
      bottom: { enabled: true, height: 170 },
      middle: { enabled: false }
    },
    // fitHeight:true,
    topperOverflow: false,
    buttonDestroy: false,
    showDraggable: false,
    upperThanTop: true
  };

  drawer = new CupertinoPane('ion-drawer', settings);
  await new Promise((resolve) => setTimeout(resolve, 200));

  // arrows
  let arrows = document.querySelector('.arrows');
  drawer.on('onDidPresent', () => {
    arrows.style.opacity = '1';
  });
  drawer.on('onDragStart', () => {
    arrows.style.opacity = '0';
  });

  await drawer.present({animate: true});
};