JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

</head>
<body>
<section class="helper enterForm" id="start">
        <form class="register-form">
            <label for="login">Enter your Login</label>
            <input type="text" id="login">
            <label for="password">Enter your Password</label>
            <input type="password" id="password">
            <a id="Enter" >Enter</a>
            <a id="Register" >Register</a>

        </form>
</section>
<section class="create-user">
    <form class="create-form">
        <label for="login">Create your Login</label>
        <input type="text" id="register-n">
        <label for="password">Create your Password</label>
        <input type="password" id="register-pas">
        <a id="Sign">Sign in</a>
        <button type="button" id="back">Back</button>
    </form>
</section>

<div class="helper container" id="adbook">
    <div class="title">
        <button id="exit" type="button">Exit</button>
        <h1>Address Book</h1>

    </div>
    <div class="AddNewContact">
        <button id="addNewContact" type="button">Add new contact</button>
        <i class="fas fa-search "></i>
        <input type="text" placeholder="SEARCH BY NAME">
        <button id="ImportData" type="button">Import data to book</button>

    </div>
    <div class="addNewContact-form" id="AddDiv">
        <form id="createContact">
        <label for="name">Name</label><input type="text" id="name" class="formFields">
        <label for="phone">Phone</label><input type="text" id="phone" class="formFields">
        <label for="email">E-Mail</label><input type="text" id="email" class="formFields">
        <br><br>
        <button id="Add" type="button">Add Now</button><button id="Cancel"...

CSS

body {
    margin:0;

}
input {
    outline: none;
}
.container {
    position:relative;
    width:960px;
    margin:auto;
}

.title {
    padding:10px;
    border-bottom:2px solid;
    background:rgb(250,250,250);
}

.title h1 {
    margin:0;
    font-family:sans-serif;
    font-weight:normal;
    text-shadow:0 0 1px rgba(0,0,0,0.4);
    text-align: center;
}

.AddNewContact {
    padding:10px;


}
.AddNewContact {
    text-align: center;
}
.AddNewContact i {
    font-size:22px;
    margin:0 10px 0 0;
}
.AddNewContact input {
    border:1px dashed;
    width:50%;
    padding:10px;
    font-weight:bold;
    border-radius:5px;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.2);

}
#addNewContact {
    padding:8px;
    background:rgb(250,250,250);
    border:1px dashed;
    text-shadow:0 0 1px;
    cursor: pointer;
    outline: none;
    float: left;
}
#ImportData {
    padding:8px;
    background:rgb(250,250,250);
    border:1px dashed;
    text-shadow:0 0 1px;
    cursor: pointer;
    outline: none;
    float: right;
}
#addNewContact:hover {
    background-color:#a8ffae;
}
#ImportData:hover {
    background-color: #ffcbfa;
}
.addNewContact-form {
    height:440px;
    padding:10px;
    background:rgb(240,240,240);
    overflow:hidden;

}

.addNewContact-form label {
    position:relative;
    display:block;
    width:300px;
    height:10px;
    float:left;
    font-family:sans-serif;
    font-size:12px;
    padding:10px;
    font-weight:bold;
}

.addNewContact-form input {
    border:1px dashed;
    width:50%;
    padding:10px;
    font-weight:bold;
    border-radius:5px;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.2);
}

#Add,#Cancel {
    padding:10px;
    margin:20px;
    position:relative;
    left:300px;
    border:1px dashed;
    border-radius:5px;
    font-weight:bold;
    cursor: pointer;
    outline: none;
}
#Add:hover {
    background-color:#a8ffae;
}
#Cancel:hover {
    background-color: #ffb7b5;
}
.addbook {
    margin-top:55px;
   ...

JavaScript

class BookItem {
    constructor(fname, phone, email) {
        this.fname = fname;
        this.phone = phone;
        this.email = email;
    }
}
class App {
    constructor() {
        this.UserBook = null;
    }

    page(data) {
        let sp = document.querySelector('#start');
        let lp = document.querySelector('#adbook');

        if (data == 0) {
            if (sp.style.display = 'block') {
                sp.style.display = 'none';
            }
            if (lp.style.display = 'block') {
                lp.style.display = 'none';
            }
        } else if (data == 1) {
            if (sp.style.display = 'none') {
                sp.style.display = 'block'
            }
            if (lp.style.display = 'block') {
                lp.style.display = 'none'
            }
        } else {
            if (sp.style.display = 'block') {
                sp.style.display = 'none'
            }
            if (lp.style.display = 'none') {
                lp.style.display = 'block'
            }
        }
    }

    start() {
        this.page(0);
        if (localStorage.getItem('user') == null) {
            if (localStorage.getItem('Data') == null) {
                app.init()
            } else {
                return this.page(1)
            }
        } else {
            return app.load();
        }
    }

    load() {
        let obj = JSON.parse(localStorage.getItem('user'));

        this.page(2);
        this.UserBook = new AddressBook(obj);
        this.UserBook.load();
        this.UserBook.multiSel();
    }

    init() {
        let obj = JSON.stringify({users: [{Username: "root", Password: "", Books: []}]});
        localStorage.setItem('Data', obj);
        localStorage.setItem('user', JSON.stringify({uid: 0, obj: []}));
        return this.load();
    }

    login() {

        let u = document.querySelector('#login').value;
        let p = document.querySelector('#password').value;
        let obj =...