JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app">
        <div class="wrapper">
        <div class="content">
            <div class="head">
                <img src="res/logo/institucional.png" />
            </div>
            <div class="container">
                <form>
                    <input type="button" value="Fazer Login" onclick="login()" class="button" id="loginClick" />
                </form>
            </div>
            <div id="deviceready" class="blink">
                <p class="event notConnected">N&atilde;o conectado</p>
                <p class="event connecting">conectando</p>
                <p class="event connected">conectado</p>
            </div>
        </div>
        </div>
    </div>

JavaScript

function login() {
            //initialize login
            var parentElement = document.getElementById('deviceready');
            var notConnectedElement = parentElement.querySelector('.notConnected');
            var connectingElement = parentElement.querySelector('.connecting');

            notConnectedElement.setAttribute('style', 'display:none');
            connectingElement.setAttribute('style', 'display:block;');
            notConnectedElement.style.display = 'none';
            connectingElement.style.display = 'block';
            alert("Hello world!");
        }