JSFiddle - React, Tailwind, and code Playground
HTML
<section class="blur">
</section>
CSS
.blur p {
padding-left: 5px;
margin:5px;
}
.blur {
display: block;
width: 350px;
/*Largeur de la div, égale à celle de la photo **/
height: 215px;
/* hauteur de ma div, plus grande que celle de l'image pour y placer le titre*/
-webkit-box-shadow: 1px -2px 30px 2px #A3A3A3;
box-shadow: 1px -2px 30px 2px #A3A3A3;
/* Ombre de la div */
padding-bottom: 10px;
display: inline-block;
/* Aligne l'ensemble des typographies */
margin: 7px;
margin-top: 20px;
background-color: #fffffd;
/* pour placer ta section ou tu veux rajoute ça après l'avoir défini en "block" */
/* Tansition de type linear durent 400 ms et qui transitionne tout (all)*/
transition: all 4000s linear;
}
.icones {
position: absolute;
right: 20px;
/* positionnement en haut à droite (par rapport à la bordure du haut et celle de droite de la "section")*/
height: 4px;
/* dimensions du rectangle "div" qui contiendra les 3 logos */
width : 6px;
}
.logo {
width: 200%;
opacity: 0;
/* pour que l'apparition soit progressive */
transition-delay: 5s;
transition: 500s opacity;
}