JSFiddle - React, Tailwind, and code Playground

by endikoa

HTML

<div id='annonces'>
<div id='annonce1' class='annonce_module'>
<span class='titre_l1' style='color:#da7b00;'>Flyers</span>
<span class='titre_l2'>&nbsp;Publicitaires</span><br>
<span class='qte'>1000</span>
<span class='qte_designation'>&nbsp;exemplaires</span>
<span class='texte_cartouche' style='background-color:#da7b00;'>FORMAT 10 x 21</span>
<br><span class='texte_detail_tarif'>Format 100x210mm.<br />Impression OFFSET en Quadri Recto-Verso.<br />sur couché brillant 135g.</span>
<span class='tarif' style='color:#da7b00;'>236</span><span class='ht'>&euro;HT</span>
<span class='conditions'><b style='font-weight:bold;'>Conditions de l'offre</b><br />Fichier fourni par vos soins sous PDF HD<br />Fabrication sous 3 jours<br />Frais de port offert*<br />Paiement intégral à la commande</span>
</div>
<div id='annonce2' class='annonce_module'>
<span class='titre_l1' style='color:#5eb1c2;'>Routage</span>
<span class='titre_l2'>&nbsp;de votre flyer</span><br>
<span class='qte'>400</span>
<span class='qte_designation'>&nbsp;plis postaux</span>
<br><span class='texte_detail_tarif'>Mise sous pli d'un document. Adressage de l'enveloppe.<br />Opération timbrage en DT. Dépot en poste (affranchissement en sus).<br />Impression de votre logo au recto de l'enveloppe offerte.</span>
<span class='tarif' style='color:#5eb1c2;'>279</span><span class='ht'>&euro;HT</span>
<span class='conditions'><b style='font-weight:bold;'>Conditions de l'offre</b><br />Valable uniquement pour la mise sous pli d'un flyer réalisé par nos soins.<br />Vous fournissez le fichier d'adresses sous Excel, aux normes postales et sans intervention de notre part.<br />CIPC fourni les enveloppes blanches 80g format DL ou C5 gommés, sans fenêtre.</span>
</div>
<div id='annonce3' class='annonce_module'>
<span class='titre_l1' style='color:#bf0287;'>Flyers</span>
<span class='titre_l2'>&nbsp;publicitaires</span><br>
<span class='qte'>1000</span>
<span class='qte_designation'>&nbsp;exemplaires</span>
<span...

CSS

body {
    font-family: Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
    background-color:#156123;
}
#annonces{
float:right;
height: 250px;
overflow: hidden;
    position: relative;
right: 0;
background-color:#004479;
width: 770px;
}
#annonces > div {
font-family: Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
height: 210px;
padding: 20px;
cursor: pointer;
float: left;
position: relative;
width: 730px;
top:0;
}
#annonces > div > .titre_l1{
font-size: 4em;
font-weight: 600;
left: 0.7em;
top: 0.2em;
}

#annonces > div > .titre_l2{
color: white;
font-size: 3.4em;
font-weight: 100;
left: 0.5em;
text-shadow: 2px 2px 10px #000;
top: 1em;
}
#annonces > div .texte_cartouche{
color: white;
display: inline-block;
font-size: 1.3em;
font-weight: 100;
line-height: 0.8em;
margin: 5px;
padding: 7px 5px 2px;
}
#annonces > div > .qte{
color: white;
font-size: 4em;
font-weight: 100;
}
#annonces > div > .qte_designation{
color: white;
font-size: 1.3em;
font-weight: 100;
}
#annonces > div > .texte_detail_tarif{
color: white;
font-size: 0.8em;
font-style: italic;
font-weight: 100;
left: 23px;
letter-spacing: 1px;
line-height: 1em;
top: 193px;
}
#annonces > div > .conditions{
bottom: 10px;
color: white;
display: block;
font-size: 0.7em;
font-weight: 100;
line-height: 1.2em;
position: absolute;
right: 10px;
text-align: right;
	}
#annonces > div > .tarif{
display: block;
font-size: 8em;
font-weight: bold;
position: absolute;
right: 20px;
text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000;
top: 72px;
}
#annonces > div > .ht{
color: white;
display: block;
font-size: 1.5em;
position: absolute;
right: 10px;
text-shadow: 2px 2px 10px #000;
top: 66px;
	}

JavaScript

function anim(){
	var nbre_annonce = 3;
	var pause_annonce = 500;
	var vitesse_annonce = 500;
	var move_up = -250;
	var move_down = 250;
	for (var i = 1; i < nbre_annonce; i++){
		move_up = move_up*i;
		$("#annonces > div").delay( pause_annonce ).animate({"top":move_up}, vitesse_annonce, "linear");
	}
		move_down = move_up+move_down;
	for (var i = 1; i < nbre_annonce; i++){	
		move_down = move_up+250*i;
			$("#annonces > div").delay( pause_annonce ).animate({"top":move_down}, vitesse_annonce, "linear");
	}
}

$(document).ready(function() {
anim();
//*******************************************************
});