JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<body>


<div class="squares">
    <div class="square1" data-text="I am Square 1"></div>
    <div class="square2" data-text="I am Square 2"></div>
    <div class="square3" data-text="I am Square 3"></div>
    <div class="square4" data-text="I am Square 4"></div>
    <div class="square5" data-text="I am Square 5"></div>
    <h2 class="squareIdent" data-text="050505">050505 </h2>
</div>
</body>

CSS

body{
  width: 100%;
  height: 100%;
}
div.square1, div.square2, div.square3, div.square4, div.square5
{
	height: 100px;
	width: 100px;
	background-color: black;
	margin-left: 126px;
	margin-top: 150px;
	float: left;
}

div.squares
{
	margin-left: 175px;
}
.squareIdent{
    opacity: 1;
}

JavaScript

$(".squares > *").hover(function(){
    $(".squareIdent").text($(this).attr("data-text"));
    $(".squareIdent").stop().animate({
        opacity: 1
    }, 500);
}, function(){
    $(".squareIdent").stop().animate({
        opacity: 1
    }, 500);
});

$("body").hover(function(){
    $(".squareIdent").text($(this).attr("data-text"));
    $(".squareIdent").stop().animate({
        opacity: 1
    }, 500);
}, function(){
    $(".squareIdent").stop().animate({
        opacity: 1
    }, 500);
});