JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>

<H1>1ere version de l'affichage d'un film</H1>
<section id="films">
   
</section>
<script id="films-template" type="text/html">
 {{#videos}}
    <div class="film">
        <img src="{{affiche}}">
        <p class="title">{{titre}} ({{annee}})</p>
        <p class="genre">Genre: {{genre}}</p>
        <a href="{{lien}}">Voir bande-annonce</a>
    </div>
{{/videos}}    
</script>

CSS

.film {
    width:300px;
    height: 400px;
    background-color: #ccc;
    margin: 1em;
    float:left;
    text-align:center;
}

JavaScript

function renderTemplate(containerId, data){
    var container = document.getElementById(containerId);
    var template = document.getElementById(containerId+"-template");
    console.log(data);
    container.innerHTML =  Mustache.render(template.innerHTML, { videos: data });
}

function film(titre,annee,genre,lien,affiche)
{
	this.titre = titre;
	this.annee = annee;
	this.genre = genre;
	this.lien = lien;
	this.affiche = affiche;
}

var video = new Array(); 
    video[0] = new film('4 minutes',2006,'drame','4 minutes.avi','images/4 minutes.jpg');
    video[1] = new film('7 vies',2008,'drame','7 vies.avi','images/7 vies.jpg');
    video[2] = new film('7h58 ce samedi là',2007,'drame','7h58 ce samedi la.avi','images/7h58 ce samedi là.jpg');
    video[3] = new film('10,000 BC',2008,'aventure','10 000 BC.avi','images/10 000 BC.jpg');
    video[4] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
    video[5] = new film('11ème heure',2007,'documentaire','11e heure.avi','images/11ème heure.jpg');
    
    renderTemplate("films", video);