JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
        
        
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css"></link>
    </head>
    <body>
        <div id="general">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                   
                    <ons-toolbar-button>
                    <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>

                <div class="right">
                    
                </div>
            </ons-toolbar>
          
            <ons-tabbar swipeable position="auto">
              <ons-tab page="new-drink.html" label="New Drink" icon="md-cocktail">
              </ons-tab>
              <ons-tab page="tab2.html" label="Info" icon="md-face" active >
              </ons-tab>
              <ons-tab page="settings.html" label="Settings" icon="md-settings">
              </ons-tab>
            </ons-tabbar>
        </ons-page>
          
        <template id="new-drink.html">
            <ons-page id="Tab1">
                <!-- vue instance -->
                <!-- <div id="general_info_and_inputs"> -->
                    <!-- Input a new drink -->
                    <ons-card>
                        <input type="text" v-model="drink_counter.drink_name" class="text-input name_alc" placeholder="Nome alcolico">
                        <input type="text" v-model="drink_counter.mL" class="text-input name_alc" placeholder="Inserisci la quantità in mL">
                        <input...

JavaScript

//js file

window.onload = function () {
    var vue_general = new Vue({
        el: "#general",
        data:{
            general_characteristics:{
                name: "",
                age: "",
                weight:"",
                height:"",
                sex: ""
            },
            standard_alcohol_beverages:{
                name:"Beer",
                alcohol_percentage:"4.2",
                mL: "500"
            },
            drink_counter:{
                date:[""],
                drink_name:[""],
                drink_type: [""],
                mL:[""],
                blood_alcohol_content:[""],
                drink_alcohol_content:[""] 
                //time:[""] --> To implement
            },
            alcohol_level: 0.00
        },
        mounted(){
            if(localStorage.getItem("save_drink_counter")){
                try{
                    this.drink_counter = JSON.parse(localStorage.getItem("save_drink_counter"));
                }catch(e){
                    localStorage.removeItem("save_drink_counter");
                }
            }
        }
    });

    var input_new_drink = new Vue({
        el: "#general_info_and_inputs",
        data:{
            drink_counter:{
                date:"",
                drink_name: null,
                drink_type: null,
                mL: null,
                blood_alcohol_content: null,
                drink_alcohol_content: null
                //time:"" --> To implement
            }
        },
        methods:{
            pushToMainArray(){
                    //controllo se è stato inserito qualcosa dall'utente (if!null==true)
                    // if(!this.drink_name){
                    //     return;
                    // }

                    if(this.drink_counter.drink_name != "" || this.drink_counter.drink_alcohol_content != "" || this.drink_counter.mL != ""){
                        this.drink_counter.date = new Date();
                       ...