JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<div id="viewport">
    <div class="rectangle" id="0"></div>
    <div class="rectangle" id="1"></div>
    <div class="rectangle" id="2"></div>
    <div class="rectangle" id="3"></div>
    <div class="rectangle" id="4"></div>
    <div class="rectangle" id="5"></div>
    <div class="rectangle" id="6"></div>
    <div class="rectangle" id="7"></div>
    <div class="rectangle" id="8"></div>
    <div class="rectangle" id="9"></div>
    <div class="rectangle" id="10"></div>
    <div class="rectangle" id="11"></div>
    <div class="rectangle" id="12"></div>
    <div class="rectangle" id="13"></div>
    <div class="rectangle" id="14"></div>
    <div class="rectangle" id="15"></div>
    <div class="rectangle" id="16"></div>
    <div class="rectangle" id="17"></div>
    <div class="rectangle" id="18"></div>
    <div class="rectangle" id="19"></div>
    <div class="rectangle" id="20"></div>
    <div class="rectangle" id="21"></div>
    <div class="rectangle" id="22"></div>
    <div class="rectangle" id="23"></div>
    <div class="rectangle" id="24"></div>
    <div class="rectangle" id="25"></div>
    <div class="rectangle" id="26"></div>
    <div class="rectangle" id="27"></div>
    <div class="rectangle" id="28"></div>
    <div class="rectangle" id="29"></div>
    <div class="rectangle" id="30"></div>
    <div class="rectangle" id="31"></div>
    <div class="rectangle" id="32"></div>
    <div class="rectangle" id="33"></div>
    <div class="rectangle" id="34"></div>
    <div class="rectangle" id="35"></div>
    <div class="rectangle" id="36"></div>
    <div class="rectangle" id="37"></div>
    <div class="rectangle" id="38"></div>
    <div class="rectangle" id="39"></div>
    <div class="rectangle" id="40"></div>
    <div class="rectangle" id="41"></div>
    <div class="rectangle" id="42"></div>
    <div class="rectangle" id="43"></div>
    <div class="rectangle" id="44"></div>
    <div class="rectangle" id="45"></div>
    <div class="rectangle" id="46"></div>
    <div...

CSS

#viewport {
    width:828px;
}
.rectangle {
    border-style: solid;
    border-width: 1px;
    margin-top:20px;
    margin-right:-20px;
    height: 50px;
    width:30px;
    background: blue;
    float: left;

}

JavaScript

var cards = document.getElementsByClassName("rectangle");


var hover = function () {
            
            
            this.style.marginTop = "10px";
            document.getElementById(parseInt(this.id, 10) - 1).style.marginTo = "5px";
            document.getElementById(parseInt(this.id, 10) + 1).style.marginTo = "5px";  

};

for (i = 0; i < cards.length; i++)
cards[i].addEventListener('mouseenter', hover, false);