JSFiddle - React, Tailwind, and code Playground

by madan B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<body>
    <h2>
        How to Use Toastr Notifications</h2>
    <div class="control-group" id="toastrTypeGroup">
        <div class="controls">
            <label>
                Toast Type</label>
            <label class="radio">
                <input type="radio" name="toasts" value="success" checked />Success
            </label>
            <label class="radio">
                <input type="radio" name="toasts" value="info" />Info
            </label>
            <label class="radio">
                <input type="radio" name="toasts" value="warning" />Warning
            </label>
            <label class="radio">
                <input type="radio" name="toasts" value="error" />Error
            </label>
        </div>
    </div>
    <br />
    <div class="control-group" id="toastrPositionGroup">
        <div class="controls">
            <label>
                Position</label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-right" checked />Top Right
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-bottom-right" />Bottom Right
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-bottom-left" />Bottom Left
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-left" />Top Left
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-full-width" />Top Full Width
            </label>
            <label class="radio">
                <input...

CSS

body {
    font-family:Verdana;
    font-size:small;
}

JavaScript

$(function(){
$('#showtoast').click(function () {
        toastr.options = {
        "debug": false,
        "positionClass": $("#toastrPositionGroup input:radio:checked").val(),
        "onclick": null,
        "fadeIn": 300,
        "fadeOut": 100,
        "timeOut": 3000,
        "extendedTimeOut": 1000
        }
        
        var d= Date();
        toastr[$("#toastrTypeGroup input:radio:checked").val()](d,"Current Day & Time");  
});
});