JSFiddle - React, Tailwind, and code Playground

by Ka1dos

HTML

<head>
<!-------------------------------------------------------------->

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-------------------------------------------------------------->

<script src="https://kit.fontawesome.com/abe3bddbe4.js" crossorigin="anonymous"></script>
<!-------------------------------------------------------------->
</head>

<div class="taxi_app-wrapper">

  <div id="taxi_app">

    <div class="download-page">

      <div class="logo">
        <img src="img/taxi-app/logo.png" alt="">
      </div>

      <div class="ellipse-wrapper">

        <div class="ellipse-text">
          <p>Доступно. Быстро.<br>Надеждно.</p>
        </div>

      </div>

    </div>

    <div class="main-page">

      <div class="menu-wrapper">

        <div class="menu_burger">
          <a href="#" class="burger" onclick="openMenu()">
            <i class="fas fa-bars"></i>
          </a>
        </div>

        <div class="menu_taxi-list">

          <div class="menu_taxi-burger_title">

            <div class="burger_title">
              <p class="name">Padre</p>
              <p class="grade">3.4 <i class="fas fa-star"></i></p>
            </div>

          </div>

          <div class="menu_list-content">

            <a href="#" class="menu-item menulinks" onclick="openMenuList(event, 'payment_method')">
              Способы оплаты<br>
              <span class="method">Картой<!--Наличкой-->
                <img src="img/taxi-app/credit-card.svg" alt=""><!--<img src="img/taxi-app/money-alt-cash-currency.svg" alt="">-->
              </span>
            </a>
            <a href="#" class="menu-item menulinks" onclick="openMenuList(event, 'history_orders')">История заказов</a>    

          </div>

        </div>

        <div class="menu_item-content">

          <div class="menu_back">

            <a href="#" class="back_arrow">
              <i...

CSS

*, *::after, *::before{
    box-sizing: border-box;
}

body{
    font-family: 'Rubik-Regular';
    color: black;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

a{
    text-decoration: none;
}

.taxi_app-wrapper{
    position: absolute;
    bottom: 0;
    right: 0;
}

#taxi_app{
    width: 414px;
    height: 800px;
    background-color: #FBBC04;
}

/*
    Страница загрузкт такси
*/

.download-page{
    display: none;
    justify-content: center;
    overflow: hidden;
    transition: 0.75s;
    background-color: #FBBC04;
    user-select: none;
}

.download-page .logo{
    margin-top: 184px;
}

.ellipse-text{
    color: rgba(255, 255, 255, 0.44);
    font-family: 'Rubik-Medium';
    font-size: 24px;
    position: absolute;
    bottom: 50px;
    animation: ellipse-text 1.5s linear 5;
}

@keyframes ellipse-text {
    25% { color: rgba(255, 255, 255, 0.712) }
    50% { color: rgba(255, 255, 255, 0.44) }
    75% { color: rgba(255, 255, 255, 0.712) }
    100% { color: rgba(255, 255, 255, 0.44); }
}


.ellipse-wrapper{
    position: absolute;
    bottom: 0;
    background: url('../img/taxi-app/Ellipse.svg');
    width: 100%;
    height: 520px;
    display: flex;
    justify-content: center;
    text-align: center;
}

/*
    Страница такси
*/

.main-page{
    display: flex;
    opacity: 1;
    transition: .5s;
    width: 414px;
    height: 896px;
    position: relative;
}

.menu-wrapper{
    width: 100%;
}

.menu_burger{
    margin-left: 19px;
    margin-top: 23px;
    user-select: none;
    position: absolute;
}

.menu_taxi-burger_title{
    margin-left: 19px;
    margin-top: 60px;
}

.menu_taxi-burger_title .menu_burger{
    margin: 0;
}

.menu_taxi-list{
    display: none;
    width: 50%;
    height: 100vh;
    background-color: #fff;
    animation: menu-content .25s linear;
    overflow: hidden;
    flex-direction: column;
}

@keyframes menu-content{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    70%{
 ...

JavaScript

/*let p = $('.download-page');
let m = $('.main-page');

function opacityP(){ p.css('opacity', 0); p.css('display', 'none'); }
function openM(){ 
    m.css('display', 'flex'); 
    function opacityM(){
        m.css('opacity', 1);
    }
    setTimeout(opacityM, 750);
}

function preloader(){
    setTimeout(opacityP, 7500);
    setTimeout(openM, 7500);
}

preloader();
*/

function openMenu(){
    if(!isMenuBurger){
        $('.menu_taxi-list').css('display', 'flex');
        $('.menu_burger').prependTo(".menu_taxi-burger_title");
        isMenuBurger = true;
    } else {
        $('.menu_taxi-list').css('display', 'none');
        $('.menu_burger').prependTo(".menu-wrapper");
        isMenuBurger = false;
    }
    $(document).keydown(function(e) {
        if (e.keyCode == 27) {
            $('.menu_taxi-list').css('display', 'none');
            $('.menu_burger').prependTo(".menu-wrapper");
            isMenuBurger = false;
        }
    });
    
}

let isMenuBurger = false;
let isMenuList = false;

function openMenuList(evt, pageName){
    var i, content, links;
    content = document.getElementsByClassName("menu_item-content");
    for (i = 0; i < content.length; i++){
        $('.menu_taxi-list').css('display', 'none');
        $('.menu_burger').prependTo(".menu-wrapper");
        isMenuBurger = false;
        content[i].style.display = "block";
        isMenuList = true;
    }
    links = document.getElementsByClassName("menulinks");
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" item-active", "");
    }
    document.getElementById(pageName).style.display = "flex";
    evt.currentTarget.className += " item-active";
    $(".back_arrow").on( "click", function() {
        for (i = 0; i < content.length; i++){
            content[i].style.display = "none";
            isMenuList = false;
            $('.menu_taxi-list').css('display', 'flex');
            $('.menu_burger').prependTo(".menu_taxi-burger_title");
 ...