JSFiddle - React, Tailwind, and code Playground

by dimanchik87

HTML

<body>
    <div id="abt_blc">
        <img src="nightlife3.jpg" />
        <img src="food2.jpg" />
        <img src="nature2.jpg" />
        <img src="transport1.jpg" />
        <img src="nature10.jpg" />
        <img src="nature9.jpg" />
        <img src="nightlife4.jpg" />
        <div id="glid_1" class="class-for-14px">
            <img src="arr_c.png" id="arr_1" />
            <img src="arr_c.png" id="arr_2" />
             <h1 class="class-for-36px">Testare in deinde</h1>

            <p>Lorem ipsum dolor sit amet, coniungitur vestra nutriendam veni illis ad quia, vini in lucem in lucem concitaverunt in. Rei completo litus sua in lucem concitaverunt in lucem. Coniugem Jesu Dionysiadem in lucem concitaverunt in lucem concitaverunt in fuerat eum istam provoces est Apollonius non ait in.</p>
             <h1 class="class-for-36px">Dicentem Austri ventriculum</h1>

            <p>Intuens per accipere sibi adsedit in deinde cupis ei primum subsannio oculos rex cum unde meae! Ripae simul participat alta petit ad nomine Stranguillio sit audivit illius actio viro nihil impetrat est in. Dolores forma mortem transibat se ad per sanctus primum gaudet in modo.</p>
             <h1 class="class-for-36px">Invitamus me vero</h1>

            <p>Quique non potentiae Apollonium in lucem exitum vivit in fuerat eum ego Pentapolim Cyrenaeorum! Potius operabatur ad per accipere nescio atque ut casus. Ecce sit in fuerat se in rei finibus veteres hoc contra serpentibus cum magna anima haec vidit tam gremio regi.</p>
        </div>
    </div>
    <div id="srv_blc">
        <div id="accord">
            <div>
                <p class="class-for-36px">Tua</p>
                <div class="class-for-16px">Tempor non potentiae cognoscitivarum non ait regem adventu nihil. Etiam corpusculum subito obstupuit in deinde vero non dum animae tuae illa accipe corpus ad nomine. Dicite enim formam se est amet coram te. Cyrenaeam plus plorantes abscederem assignato ipsum ait est amet coram posset...

CSS

body {
    background-color:#eee;
}
#menu {
    position:fixed;
    top:15px;
    left:50%;
    width:590px;
    height:100px;
    margin:0 0 0 -295px;
}
#logo {
    position:fixed;
    top:230px;
    left:50%;
    margin-left:-490px;
    transform:rotate(-40deg);
}
#abt, #srv, #slt, #cnt {
    width:140px;
    height:100px;
    background-color:#fff;
    position:absolute;
    font-weight:bold;
    color:#333;
    line-height:100px;
    text-align:center;
    border:4px solid #ccc;
}
#srv_blc {
    background: url(nature.jpg) center 0 no-repeat fixed;
    background-size: auto 1200px;
}
#abt_blc, #srv_blc, #slt_blc {
    width:1000px;
    height:1000px;
    margin:0 auto;
    background-color:#777;
    position:relative;
    overflow:hidden;
}
#cnt_blc {
    width:1000px;
    height:1000px;
    margin:0 auto;
    background-color:#555;
    position:relative;
    overflow:hidden;
}
#abt-mous, #srv-mous, #slt-mous, #cnt-mous {
    width:140px;
    height:100px;
    position:absolute;
}
#abt, #abt-mous {
    top:0;
    left:0;
}
#srv, #srv-mous {
    top:0;
    left:150px;
}
#slt, #slt-mous {
    top:0;
    left:300px;
}
#cnt, #cnt-mous {
    top:0;
    left:450px;
}
#img3, #img4 {
    text-align:center;
    font-size: 350px;
    line-height: 300x;
    font-weight:bolder;
    position:absolute;
    top:300px;
    left:25px;
    text-indent:0;
    margin:0;
    color:#000;
    font-family:'Times';
    transform:rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
#img3 {
    color:#fff;
}
#abt_blc img {
    display:block;
    position:absolute;
    margin:0;
    /*box-shadow: 5px 5px 20px #ddd;*/
    border: 10px solid #fff;
}
#glid_1 {
    width:670px;
    position:absolute;
    top:130px;
    border-radius:40px;
    border:2px solid #222;
    padding:50px 0 50px 0;
    background-color:#333;
    opacity:0.7;
}
#glid_1 p {
    margin:10px 85px 20px 85px;
    background-color:#fff;
    padding:15px 10px;
    width:480px;
}
#glid_1 h1 {
    margin:20px 95px 0...

JavaScript

window.addEventListener("load", L4, false);

function L4() {
    //// L3 ////////////////////////////////////////////////////////////////////////////////////////

    var abt_mouse = document.getElementById("abt-mous");
    var srv_mouse = document.getElementById("srv-mous");
    var slt_mouse = document.getElementById("slt-mous");
    var cnt_mouse = document.getElementById("cnt-mous");

    var abt = document.getElementById("abt");
    var srv = document.getElementById("srv");
    var slt = document.getElementById("slt");
    var cnt = document.getElementById("cnt");

    abt_mouse.def = abt;
    srv_mouse.def = srv;
    slt_mouse.def = slt;
    cnt_mouse.def = cnt;

    abt_mouse.addEventListener("mouseover", deform_over, false);
    abt_mouse.addEventListener("mouseout", deform_out, false);
    srv_mouse.addEventListener("mouseover", deform_over, false);
    srv_mouse.addEventListener("mouseout", deform_out, false);
    slt_mouse.addEventListener("mouseover", deform_over, false);
    slt_mouse.addEventListener("mouseout", deform_out, false);
    cnt_mouse.addEventListener("mouseover", deform_over, false);
    cnt_mouse.addEventListener("mouseout", deform_out, false);

    var logo = document.getElementById("logo");

    window.addEventListener("mousemove", logo_tr, false);

    function logo_tr(event) {
        window.removeEventListener("mousemove", logo_tr, false);
        var trX = 230 + (Math.random() * 20 - 10);
        var trY = 490 + (Math.random() * 20 - 10);

        toChange(logo, {
            marginLeft: -trY,
            top: trX,
            transform: "rotate(" + (-40 + Math.random() * 20 - 10) + "deg)"
        }, 200, logo_tr2);

    }

    function logo_tr2() {

        toChange(logo, {
            marginLeft: -490,
            top: 230,
            transform: "rotate(-40deg)"
        }, 200, logo_tr3);

    }

    function logo_tr3() {

        window.addEventListener("mousemove", logo_tr, false);

    }

    function deform_over(event) {

 ...