JSFiddle - React, Tailwind, and code Playground

by GGaritaJ

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="ggFeedbackMessages" />
    <meta name="author" content="Ing.Gerardo Garita Juarez" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-Xss-Protection" content="'1; mode=block' always">
    <meta http-equiv="X-Content-Type-Options" content="'nosniff' always">
    <title>jQuery Plugin ggFeedbackMessages</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="css/feedbackMessages-1.0.css" rel="stylesheet" />
    <link href="css/myStyle.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/feedbackMessages-1.0.js"></script>
    <script src="js/myScript.js"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>

    <div id="mainContainer">
        <label>Hola mundo!</label>
    </div>

</body>
</html>

CSS

#mainContainer {
    padding:20px;
}

/*////////////////////////////////////////////
// ggFeedbackMessage Cell JS/CSS PlugIn V1.2//
// Developed by: Ing.Gerardo Garita J.      //
// FullStack Developer                      //
// email: [email protected]                 //
// date: friday, 2018-09-15                 //
// last date: friday, 2018-09-21            //
////////////////////////////////////////////*/

.feedbackMsgsContainer{
    width:100%;
}
.feedbackMsgsContainer .feedbackMsg {
    border: 2px solid;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
    width: 300px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    border-radius: 4px;
    padding: 5px;
    background-color:#fff;
}
    .feedbackMsgsContainer .feedbackMsg.info {
        border-color: #337ab7;
    }
    .feedbackMsgsContainer .feedbackMsg.warning {
        border-color: #d87216;
    }
    .feedbackMsgsContainer .feedbackMsg.success {
        border-color: #2c872e;
    }
    .feedbackMsgsContainer .feedbackMsg.danger {
        border-color: #a94442;
    }
.feedbackMsgsContainer .feedbackMsg .icon {
    float: left;
    width: 50px;
}
.feedbackMsgsContainer .feedbackMsg .icon span {
    font-size: 40px;
}
    .feedbackMsgsContainer .feedbackMsg.info .icon span:before {
        content: "\e086";
    }
    .feedbackMsgsContainer .feedbackMsg.warning .icon span:before {
        content: "\e209";
    }
    .feedbackMsgsContainer .feedbackMsg.success .icon span:before {
        content: "\e013";
    }
    .feedbackMsgsContainer .feedbackMsg.danger .icon span:before {
        content: "\e014";
    }
    .feedbackMsgsContainer .feedbackMsg.info .icon span {
        color: #31708f;
    }
    .feedbackMsgsContainer .feedbackMsg.warning .icon span {
        color: #d87216;
    }
    .feedbackMsgsContainer .feedbackMsg.success .icon span {
        color: #2c872e;
    }
    .feedbackMsgsContainer .feedbackMsg.danger .icon...

JavaScript

$(document).ready(function () {
    //"body" selector is the element where the message is added
    $("body").ggFeedbackMessage({
        title: "Titulo de pruebas",// required
        text: "Este es el contenido del mensaje.",// not required
        type: "success",// info is default, success, warning, danger
        delay: 0,// miliseconds
        duration: 5000,// miliseconds
        animationInDuration: 1000,// miliseconds
        animationOutDuration: 700,// miliseconds
        customClasses: "myClass",// css classes by message
        redirect: [{// internal links of message
            title: "website",// link title
            url: "http://www.ggaritaj.com/",// link url to redirect
            target: "_blank"// target attribute in a tag
        },
        {
            title: "github",
            url: "https://www.github.com/GGaritaJ/",
            target: "_blank"
        }]
    });
    //test
    setTimeout(function () {
        $("#mainContainer").ggFeedbackMessage({
            title: "Titulo de pruebas 2",
            objects: $("<input type='text' class='form-control' placeholder='type here...' />")// custom objects like images, lists, inputs, video or jquery selector
        });
    }, 7000);
});

///////////////////////////////////////////////
// ggFeedbackMessage Cell JS/CSS PlugIn V1.2 //
//  Developed by: Ing.Gerardo Garita J.      //
//                FullStack Developer        //
//  email:  [email protected]                //
//  date:       friday, 2018-09-15           //
//  last date:  friday, 2018-09-21           //
///////////////////////////////////////////////

; (function ($) {
    var _delay = 1000;
    var _duration = 10000;
    var _animationInDuration = 1000;
    var _animationOutDuration = 700;
    jQuery.fn.ggFeedbackMessage = function (options) {
        try {
            var type = 'info';
            var customClasses = '';
            var text = '';
            if ((options != undefined) && (options !== null) && (options...