JSFiddle - React, Tailwind, and code Playground

SweetAlert: Plugin JQuery que muestra ventanas de mensaje muy bonitas (sustituye al típico alert). http://t4t5.github.io/sweetalert/

by Yolanda Robles

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.min.js"></script>
<div class="button" id="boton1" onclick="boton1();">Click me!</div>
<div class="button" id="boton2" onclick="boton2();">Click me!</div>
<div class="button" id="boton3" onclick="boton3();">Click me!</div>
<div class="button" id="boton4" onclick="boton4();">Click me!</div>

CSS

.button {
    border: solid 2px #999;
    width: 70px;
    height: 30px;
    border-radius: 5px;
    padding:7px;
    cursor:pointer;
    line-height:30px;
    background-color: #75892d;
    font-weight:bold;
}

JavaScript

function boton1() {
    swal({
        title: "Error!",
        text: "Esto es un mensaje de error!",
        type: "error",
        confirmButtonText: "Cool"
    });
}

function boton2() {

    swal({
        title: "An input!",
        text: "Write something interesting:",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "Write something"
    },

    function (inputValue) {
        if (inputValue === false) return false;
        if (inputValue === "") {
            swal.showInputError("You need to write something!");
            return false
        }
        swal("Nice!", "You wrote: " + inputValue, "success");
    });
}

function boton3() {

    swal({
        title: "Auto close alert!",
        text: "I will close in 2 seconds.",
        timer: 2000,
        showConfirmButton: false
    });

}

function boton4() {

    swal({
        title: "HTML <small>Title</small>!",
        text: "A custom <span style='color: #F8BB86 '>html<span> message.",
        html: true
    });
}