JSFiddle - React, Tailwind, and code Playground

by floor_

HTML

<div id="tile_1">
    <div id="man_1">Content1</div>
    <div id="man_1_arms">Content2</div>
</div>

<div id="tile_1_text">
    <p>This is my last piece of leather.</p>
</div>

CSS

body {
    background-image: url(../html%20files/background_image-01.jpg);
    background-repeat: repeat;
    font-family: "quicksand", "Arial", "Times New Roman";
    top: 79px;
    }

    #tile_1 {
    position: relative;
    margin: 0 auto 50px auto;
    width: 1024px;
    height: 100px; 
    background:url(tile%201/room-01.jpg);
    }

    #man_1 {
    background: url(tile%201/man_1.png);
    position: absolute;
    top: 161px;
    left: 145px;
    width: 175px;
    height: 591px;
    background-repeat: no-repeat;
    }

    #man_1_arms {
    background: url(tile%201/Man_1_arms-01.png);
    position: absolute;
    width: 276px;
    height: 326px;
    top: 203px;
    left: 87px;
    animation: right_arm_1 3s infinite alternate; transform: rotate(0deg);
    -webkit-animation: right_arm_1 2s infinite alternate; 
    }
    @font-face {
    font-family: quicksand;
    src:url(quicksand/Quicksand-Regular.otf)
    }

    @keyframes right_arm_1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(15deg);}
    }

    @-webkit-keyframes right_arm_1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(15deg);}
    }

    @-moz-keyframes right_arm_1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(15deg);}
    }

    #tile_1_text {
    font-family:"quicksand", "Arial", "Times New Roman"; 
    font-size:45px;
    color:rgba(150,150,150,1.0);
    text-align: center;
    position: relative;
    top:0;
        display:none;
    }

JavaScript

$(document).ready(function(){
$("#man_1").hover(function(){
        console.log("hey");
        $("#tile_1_text").fadeIn(100);
}, function(){
        $("#tile_1_text").fadeOut(100);
});
   });