JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="block mainlab">
    <h1>TinyAlert</h1>
    <br>
    <h2>Examples:</h2>
    <h3>Basics:</h3>
    <ul>
        <li><a href="#" id='simple'>Simple Alert</a></li>
        <li><a href="#" id='tl'>Top Left</a></li>
        <li><a href="#" id='bl'>Bottom Left</a></li>
        <li><a href="#" id='br'>Bottom Right</a></li>
        <li><a href="#" id='stack'>Stack</a></li>
        <li><a href="#" id='customdelay'>Custom duration</a></li>
    </ul>
    <h3>Skins:</h3>
    <ul>
        <li><a href="#" id='s00'>Smoke Growl Skin</a></li>
        <li><a href="#" id='s0'>Blue Skin</a></li>
        <li><a href="#" id='s1'>Snow Skin</a></li>
        <li><a href="#" id='s2'>Gray Skin</a></li>
        <li><a href="#" id='s3'>Black Skin</a></li>
    </ul>
    
    <h3>Icons:</h3>
    <ul>
        <li><a href="#" id='icon'>Alert with icon</a></li>
    </ul>
    
    
    <h3>Callbacks:</h3>
    <ul>
        <li><a href="#" id='cb'>Alert with callback</a> (click on alert)</li>
    </ul>
    
    
</div>
</body>
</html>

CSS

#tinyalert{
    position: fixed;
    max-height:100%;
    overflow: hidden;
    font:12px Arial, sans-serif;
    padding-bottom: 10px;
}

#tinyalert.tr{top:0;right:0;}
#tinyalert.tl{top:0;left:8px;}
#tinyalert.br{bottom:0;right:0;}
#tinyalert.bl{bottom:0;left:8px;}

/* Basic block */
#tinyalert > div{
    width: 226px;
    height: 70px;
    margin: 8px 8px 0 0;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    cursor: pointer;
    -moz-box-shadow: 1px 1px 3px #c8c8c8;
    -webkit-box-shadow: 1px 1px 3px #c8c8c8;
    box-shadow: 1px 1px 3px #c8c8c8;
    position: relative;
}

#tinyalert span{
    display: block;
    margin: 5px 0 0 5px;
    width: 195px;
}
span.tatitle{font-weight: bold;}
#tinyalert img{
    position: absolute;
    right:5px;
    top:5px;
}



/* Smoke skin */
#tinyalert > div.smoke {
    background: rgba(0,0,0,0.75);
    border: 2px solid transparent;
    width: 226px;
    height: 50px;
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

#tinyalert > div.smoke:hover {
    border: 2px solid #fff;
}

#tinyalert > div.smoke > span.tatitle{
    color: #fff;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
}

#tinyalert > div.smoke > span.tamsg{
    color: #fff;
    text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
}


/* Blue skin */
#tinyalert > div.blue {
    background-color: #e6f6ff;
    border: 1px solid #95b1cf;
    background-image: -moz-linear-gradient(top, #e6f6ff,#cde4f2); /* FF3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde4f2),color-stop(1, #e6f6ff)); /* Saf4+, Chrome */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f6ff', endColorstr='#cde4f2')"; /* IE8 */
}

#tinyalert > div.blue > span.tatitle{
    color: #1f66a2;
    text-shadow: #fff 0 1px 0;
}

#tinyalert > div.blue > span.tamsg{
    color: #4e4e4e;
   ...

JavaScript

window.addEvent('domready', function() {

    $('simple').addEvent('click', function(e) {
        var b = new TinyAlert();
        b.show('New Message!', 'Check your inbox to read.');
        e.stop();
    });

    $('br').addEvent('click', function(e) {
        var b = new TinyAlert({
            'position': 'br'
        });
        b.show('New Message!', 'Check your inbox to read.');
        e.stop();
    });

    $('bl').addEvent('click', function(e) {
        var b = new TinyAlert({
            'position': 'bl'
        });
        b.show('New Message!', 'Check your inbox to read.');
        e.stop();
    });

    $('tl').addEvent('click', function(e) {
        var b = new TinyAlert({
            'position': 'tl'
        });
        b.show('New Message!', 'Check your inbox to read.');
        e.stop();
    });

    $('stack').addEvent('click', function(e) {
        var b = new TinyAlert();
        b.show('First call.', 'First show.');
        b.show('Sercond call.', 'Now stacks.');
        e.stop();
    });

    $('s00').addEvent('click', function(e) {
        var b = new TinyAlert({
            skin: 'smoke'
        });
        b.show('Smoke Growl skin.', 'inspired in Growl for mac');
        e.stop();
    });

    $('s0').addEvent('click', function(e) {
        var b = new TinyAlert();
        b.show('Blue skin.', 'created by @danillos');
        e.stop();
    });

    $('s1').addEvent('click', function(e) {
        var b = new TinyAlert({
            skin: 'snow'
        });
        b.show('Snow skin.', 'created by @danillos');
        e.stop();
    });

    $('s2').addEvent('click', function(e) {
        var b = new TinyAlert({
            skin: 'gray'
        });
        b.show('Gray skin.', 'created by @danillos');
        e.stop();
    });

    $('s3').addEvent('click', function(e) {
        var b = new TinyAlert({
            skin: 'black'
        });
        b.show('Black skin.', 'created by @danillos');
        e.stop();
    });

   ...