JSFiddle - React, Tailwind, and code Playground

HTML

<div data-id="1"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="2"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="3"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="4"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="5"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="6"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="7"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="8"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="9"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="10"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="11"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="12"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="13"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="14"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="15"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="16"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="17"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="18"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="19"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="20"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="21"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="22"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="23"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="24"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="25"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="26"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="27"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="28"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="29"><img src="//placehold.it/50x50" alt=""></div>
<div data-id="30"><img src="//placehold.it/50x50" alt=""></div>

CSS

div {
    display: inline-block;
    margin: 0 15px 0 0;
    cursor: pointer;
}
.expander {
    background: coral;
    height: 100px;
    width: 100%;
    margin-bottom: 6px;
    float: left;
}

JavaScript

var div = document.querySelectorAll('div'),
    d = document.createElement('div');

d.className = 'expander';

for (var i = div.length; i--; ) {
    div[i].onmouseover = function() {
        d.innerHTML = 'Details about div #' + this.dataset.id;
        this.parentNode.insertBefore(d, this.nextSibling).style.display = 'block';
    }
    div[i].onmouseout = function() {
        d.innerHTML = '';
        this.nextSibling.style.display = 'none';
    }
}