JSFiddle - React, Tailwind, and code Playground

by Spectric

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="notification" onclick="closeNotification();">
      <h1 id="notificationHeader"><b>Neue Email erhalten!</b></h1>
      <p id="notificationDescription"></p>
    </div>

    <div id="phone">

      <div id="topbar">

        <div id="connection">
          <i class="bi bi-bar-chart-fill"></i> LIDL LTE
          <i class="bi bi-wifi-2"></i>
        </div>

        <p id="time"></p>

        <div id="battery">
          98%
          <i class="bi bi-battery-full"></i>
        </div>
      </div>

      <div id="slider">
        <div class="panel">
          <div id="appsOne">
            <!-- Instagram -->
            <div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
            <div id="instagramApp">
              <form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
                <h1 class="instagramHeader">Instagram</h1>
                <p>Erstelle einen Account</p>
                <input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
                <input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
                <button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
              </form>

              <div id="verificationCodeInstagramPage">
                <h1 class="instagramHeader">Bestätigen</h1>
                <p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!
               ...

CSS

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    user-select: none;
  }

  input:focus,
  textarea:focus {
    outline: 0;
  }

  #phone {
    height: 600px;
    width: 350px;
    border-radius: 50px;
    position: absolute;
    top: 600px;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-top: 90px solid;
    border-right: 15px solid;
    border-left: 15px solid;
    border-bottom: 90px solid;
    background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .app {
    box-shadow: 0 0 9px -4px #000;
  }

  #topbar {
    padding: 0.3em;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    transform: translate(-4%, 0) scale(0.9);
    width: 370px;
  }

  #connection {
    display: flex;
    align-items: center;
    width: 110px;
    justify-content: space-around;
  }

  #battery {
    display: flex;
    align-items: center;
    width: 110px;
    justify-content: end;
  }

  #battery .bi-battery-full {
    font-size: 23px;
    margin-left: 5px;
  }

  #topbar .bi-wifi-2 {
    font-size: 25px;
    margin-top: -3px;
  }

  #time {
    text-align: center;
  }

  #notification {
    margin: 0;
    position: absolute;
    top: 365px;
    left: 50%;
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    height: 85px;
    width: 315px;
    background: #EDEBED;
    border-radius: 10px;
    z-index: 10000;
    transition: all 0.5s;
    box-shadow: 0 0 10px -1px #525252;
    padding: 0.5em 0 0.5em 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #notification h1 {
    font-size: 23px;
  }

  #appsOne {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  #instagramIcon,
 ...

JavaScript

var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
var instagramAccount = document.getElementById("instagramAccount");

var instagramName = document.getElementById("instagramName");
var instagramNameInput = document.getElementById("instagramNameInput");

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  // add a zero in front of numbers<10
  m = checkTime(m);
  document.getElementById('time').innerHTML = h + ":" + m;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();

// Insta

function controlVerificationCode() {
  if (input.value == verificationCode) {
   ...