JSFiddle - React, Tailwind, and code Playground

by jihoon kim

HTML

<style>
.softm-ui-snackbar {
    position: fixed;
    left:0px;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(77,77,77,0.98);
    color: #fff;
    padding: 15px;
}
</style>
<input class="btn btn-primary snackbar" type="button" value="SnakBar">
<div class="softm-ui-snackbar" style="display: none; z-index: 1000; left: 0px;"><p class="message"></p></div>

JavaScript

function snakBar(s,o){
    snakBarError(o,s);
}

function snakBarError(o,v) {
    if ( typeof o === "object" ) {
        var c = o.closest("dd");
        if ( o[0].tagName.toUpperCase() == "SELECT") {
            o.one( "change", function( event ) {
                fClearError(o);
            });
        } else {
            if ( o[0].tagName.toUpperCase() == "INPUT" || o[0].type.toUpperCase() == "TEXT") {
                if (  o.hasClass("approval") || o.hasClass("phone_number") ) {
                    c = o.closest("div");
                }
                if(o[0].type.toUpperCase() == "RADIO") {
                    o.one( "change", function( event ) {
                        fClearError(o);
                    });
                } else {
                    o.one( "keyup", function( event ) {
                        fClearError(o);
                    });
                }

            } else if ( o[0].tagName.toUpperCase() == "TEXTAREA" ) {
                o.one( "keyup", function( event ) {
                    fClearError(o);
                });
            }
        }
        c.addClass("mo-error");
    } else {
        if (o) {
            v=o;
        }
    }
    $('.softm-ui-snackbar p').text(v);
    if (!v) {
        $('.softm-ui-snackbar').css("display","none");
    } else {
        $('.softm-ui-snackbar').css("display","block");
        $('.softm-ui-snackbar').hide().stop( true, true ).fadeIn(200).show().delay(1500).fadeOut(200);
    }
}

function clearError(o) {
    var c = o.closest("dd");
    try
    {
        if ( o[0].tagName.toUpperCase() == "SELECT") {
        } else {
            if ( o[0].tagName.toUpperCase() == "INPUT" || o[0].type.toUpperCase() == "TEXT") {
                if (  o.hasClass("approval") || o.hasClass("phone_number") ) {
                    c = o.closest("div");
                }
            } else if ( o[0].tagName.toUpperCase() == "TEXTAREA" ) {
            }
        }
        c.removeClass("mo-error");
    }
    catch...