JSFiddle - React, Tailwind, and code Playground

HTML

<h1>test</h1>
 <div class="select first-techno">
            <div class="hidden">
                <h2>Bla</h2>
                <p>bla bla bla bla lba.</p>
                <button type="button">En savoir +</button>
            </div>
        </div>

        <div class="select second-techno">
            <div class="hidden">
                <h2>Bla</h2>
                <p>Bla bla bla</p>
                <button type="button">En savoir +</button>      
            </div>
        </div>

CSS

.hidden {display: none;}
.select {min-height:120px; margin: 30px;} /* sinon ils ne sont pas survolables vu que leur contenu est vide */
.first-techno {background:red;}
.second-techno {background:yellow;}

JavaScript

var element = document.getElementsByClassName("select");

for (var i = 0; i < element.length; i++) {

    var el = element[i];

    el.addEventListener('mouseover', function() {
        this.children[0].classList.remove('hidden');
    })

    el.addEventListener('mouseout', function() {
        this.children[0].classList.add('hidden');
    })
}