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-segment value="dogs">
          <ion-segment-button value="cats">
            <ion-label>Cats</ion-label>
          </ion-segment-button>
          <ion-segment-button value="dogs">
            <ion-label>Dogs</ion-label>
          </ion-segment-button>
        </ion-segment>
  
        <ion-buttons slot="start">
          <ion-button>
            <ion-icon name="chevron-back-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-button>
            <ion-icon name="person-circle-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
  
      </ion-toolbar>
    </ion-header>

      <!-- Image -->
      <img onclick="present()" src="https://petdogowner.com/wp-content/uploads/2019/10/129357812_l.jpg" />
      <ion-button onclick="present()">
        Present
      </ion-button>
 
      <!-- Bulletin -->
      <ion-bulletin>
        <h1>Welcome to pet board!</h1>
        <div class="emoji">šŸ˜»</div>
          <p>
            Explore and choose a pet that you wanna play with.
          </p>
          <ion-button expand="block" (click)="dismiss();">
            Continue
          </ion-button>
      </ion-bulletin> <!-- End bulletin -->

  </ion-content>
</ion-app>
</body>
</html>

CSS

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

ion-bulletin {
  display: none;
  margin: 20px;
  margin-top: 5px;
  text-align: center;
}

ion-bulletin h1 {
  margin-top: 0px;
  color: #9c9c9c;
}

ion-bulletin p {
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 18px;
  color: #666666;
  line-height: 1.5;
  margin-top: 0;
}

ion-bulletin .emoji {
  font-size: 70px;
  background: rgb(56, 128, 255);
  border-radius: 30px;
  width: 110px;
  height: 110px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  margin-top: 20px;
  margin-bottom: 15px;
}

ion-bulletin ion-button {
  height: 50px;
  font-size: 16px;
  font-weight: bold;
}

JavaScript

const bulletin = new CupertinoPane('ion-bulletin', { 
  fitHeight:true,
  backdrop: true,
  backdropOpacity: 0.8,
  bottomClose: true,
  buttonDestroy: false,
  showDraggable: false,
  upperThanTop: true,
  bottomOffset: 20,
  onBackdropTap: () => bulletin.destroy({animate: true})
});

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

function present() {
	bulletin.present({animate: true});
}