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>
<html mode="ios">
<body>
  <ion-app>
    <ion-content>
      <ion-header>
        <ion-toolbar>
          <ion-title>Better your business</ion-title>
        </ion-toolbar>
      </ion-header>

      <img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-1.jpg?raw=true" />
      <p class="main">
        Stay competitive and strengthen your business with
        opportunities that will help you reach your full potential.
      </p>
      <img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-2.jpg?raw=true" />
      <p class="main">
        Get the latest information, articles and insights in training, mindset, nutrition,
        recovery and sleep from the Nike Performance Council – delivered direct
        to your NTC inbox.
      </p>
      <img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-3.jpg?raw=true" />

        <!-- apple-clips -->
        <ion-apple-clips>
          <div class="picture"></div>
          <div class="content">
            <div class="info">
              <div class="left-side">
                <h1>Nike Training Club</h1>
                <p>Tap start to begin this <br> workout session.</p>
              </div>
              <div class="right-side">
                <ion-button>Start</ion-button>            
              </div>
            </div>
            <div class="description">
              <div class="powered">
                <div class="icon">
                  <img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-app.png?raw=true" alt="nike-app" />
                </div>
                <div class="title">
                  <div class="by">
         ...

CSS

ion-content p.main {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  color: #717171;
  font-size: 15px;
}

.pane {  
  overflow: hidden;
  border-radius: 30px !important;
  width: calc(100% - 16px) !important;
  margin: auto;
  left: 0;
  right: 0;
  height: auto !important;
  background: transparent !important;
  padding-top: 0px !important;
}

.pane .close-button {
  background: rgb(235, 235, 235, 0.5) !important;
}

ion-apple-clips {
  display: block;
  margin: 0;
  text-align: center;
  background: transparent;
}

ion-apple-clips .picture {
  background-image: url('https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/app-clips.jpg?raw=true');
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}

ion-apple-clips .content {
  height: 170px;
  background: rgba(255, 255, 255, .65) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

ion-apple-clips .content .info { 
  display: flex;
  align-items: center;
  height: 100px;
  justify-content: space-between;
}

ion-apple-clips .content h1 {
  margin-top: 0px;
  font-size: 20px;
  margin-bottom: 0px;
  text-align: left;
}

ion-apple-clips .content p {
  font-size: 13px;
  margin: 0;
  margin-top: 5px;
  line-height: 18px;
}

ion-apple-clips .content .left-side {
  text-align: left;
  margin-left: 20px;
}

ion-apple-clips .content .right-side {
  margin-right: 20px;
}

ion-apple-clips .description {
  height: 70px;
  border-top: 1px solid #bdbdbd;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ion-apple-clips .description .powered {
  display: flex;
  align-items: center;
}

ion-apple-clips .description .title {
  text-align: left;
}

.description .powered .icon {
  margin-right: 10px;
}

.description .powered .icon img {
  width: 28px;
  border-radius: 8px;
  display: block;
}

.description .powered .by {
 ...

JavaScript

let appleClips;
appleClips = new CupertinoPane('ion-apple-clips', { 
  initialBreak: 'top',
  breaks: {
    top: { enabled: true, height: 370 },
    middle: { enabled: false},
    bottom: { enabled: false},
  },
  backdrop: true,
  backdropOpacity: 0.4,
  topperOverflow: false,
  bottomClose: true,
  buttonDestroy: true,
  showDraggable: false,
  bottomOffset: 8
});

window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();
  present();
}

function present() {
  setTimeout(() => appleClips.present({animate: true}));
}