JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
<input type="text" name="Password" id="Password">
<div class="capslockOnAlert" style="display: none;">
<div class="baloonArrow"></div>
<div class="alertIcon"></div>Caps Lock is on</div>

CSS

.capslockOnAlert {
    font-size: 9pt;
    color: #003157;
    background: rgba(248, 243, 184, 1);
    padding: 6px 18px 10px 6px;
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 200px;
    width: 100px;
    border: solid 1px #7FA6C4;
    border-radius: 3px;
    box-shadow: 1px 1px 6px -1px #000;
}
.trainingAlert .alertIcon {
    background: url(../Images/login/alert.png) no-repeat 0px 10px;
    width: 28px;
    height: 42px;
    display: inline-block;
    margin: 0 6px;
    float: left;
}
.capslockOnAlert .baloonArrow {
    width: 15px;
    height: 15px;
    background: #555;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: -9px;
    background: rgba(248, 243, 184, 1);
    border: solid #7FA6C4;
    border-width: 0 0 1px 1px;
}

JavaScript

var led;

            capsLock.observe(function (status) {
                led = led || document.getElementsByClassName("capslockOnAlert");
                if(status){$(led).show();}else{$(led).hide();}
            });