JSFiddle - React, Tailwind, and code Playground

by theblang

HTML

<article id="momento">
    <header class="marquee">
        <h1>Momento</h1>
        <p>2000</p>
    </header>
    <div class="info">
        <p class="genre">Mystery, Thriller</p>
    </div>
</article> 
<article id="insomnia">
    <header class="marquee">
        <h1>Insomnia</h1>
        <p>2002</p>
    </header>
    <div class="info">
        <p class="genre">Crime, Mystery, Thriller</p>
    </div>
</article> 
<article id="prestige">
    <header class="marquee">
        <h1>The Prestige</h1>
        <p>2006</p>
    </header>
    <div class="info">
        <p class="genre">Drama, Mystery, Thriller</p>
    </div>
</article> 
<article id="inception">
    <header class="marquee">
        <h1>Inception</h1>
        <p>2010</p>
    </header>
    <div class="info">
        <p class="genre">Action, Adventure, Mystery</p>
    </div>
</article>

CSS

header {
    border: 2px solid red;
}

article {
    border: 2px solid green;
}

JavaScript

var articles = document.getElementsByTagName("article")

for(var i = 0; i < articles.length; i++) {
     articles[i].addEventListener("click", function() {
         console.log("mouseover article"); 
     });       
}

var headers = document.getElementsByTagName("header");

for(var i = 0; i < headers.length; i++) {
     headers[i].addEventListener("click", function() {
         console.log("mouseover header"); 
     });       
}