JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id='demo1'></div>
        <div id='demo2'></div>
        <div id='demo3'></div>
        <P>Click here to fade in..</P>

CSS

#demo1,
            #demo2,
            #demo3{
                overflow: hidden; 
                width: 50px; 
                height: 50px; 
                position: absolute;
            }
            #demo1{
                background: red;
                top: 15px;
                left: 15px;
            }
            #demo2{
                background: blue;
                top: 15px;
                left: 75px;
                display:none;
            }
            #demo3{
                background: green;
                top: 15px;
                left: 135px;
            }
            p {
                position: absolute;
                top: 75px;
                cursor: pointer;
            }

JavaScript

$('#demo1').click(function(){
    $(this).fadeTo("normal", 0.33);
});
$('p').click(function(){
    $("#demo2").fadeIn("normal");
});
$('#demo3').click(function(){
    $(this).fadeOut("normal");
});