JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

CSS

.header, .middle, .footer {
    padding:5px;
    border:1px solid #eee;
    margin:2px;
}
.header{display:none;}

JavaScript

$(document).ready(function () {
    var h = 'HeaderSection';
    var m = 'Middle Section';
    var f = 'Footer';
    $("body").append("<div class='header'>" + h + "</div>");
    $("body").prepend("<button>Click here </button>");
    $("body").append("<div class='middle'>" + m + "</div>");
    $("body").append("<div class='footer'>" + f + "</div>");
});

$('button').on('click', function () {
    if ($('.header').is(':visible')) {
        $('.header').css('background', 'red');
    } else {
        alert('feeling alone');
        $('.middle').css('background', 'pink');
        $('.footer').css('background', 'yellow');
    }
});
var n = '';
n -= '1';
$('.header, .footer').mouseenter(function () {
    $(this).css('color', 'red').append(n+1);
});
$('.header, .footer').mouseleave(function () {
    $(this).css('color', '').append(n-1);
});