JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<section id="pieddepage"> <!--Ici j'ouvre ma section pied de page dans laquelle on retrouve toutes les infos importantes mais pas à première vue capitale.-->
			<div class="rubriques">
				<h6>Retrouvez-nous sur :</h6>
					<a href="https://www.instagram.com/locacheteur"> <!--Ici je crée le lien vers Instagram par icône-->
						<i class="fa-brands fa-instagram fa-2x"></i>
						<p>Instagram</p>
					</a>	<!--Ici je ferme la balise du lien vers Instagram par icône-->
					<a href="#">	<!--Ici je crée le lien vers Linkedin par icône-->
						<i class="fa-brands fa-linkedin fa-2x"></i>
						<p>LinkedIn</p>
					</a>	<!--Ici je ferme la balise du lien vers Linkedin par icône-->
					<a href="#">	<!--Ici je crée le lien vers Youtube par icône-->	
						<i class="fa-brands fa-youtube fa-2x"></i>
						<p>Youtube</p>
					</a>	<!--Ici je ferme la balise du lien vers Youtube par icône-->
			</div>
			<div class="rubriques">
				<h6>Contactez-nous :</h6>
					<a href="mailto:[email protected]?subject=Demande de Contact">
						<i class="fa-solid fa-at fa-2x"></i>
						<p>[email protected]</p>
					</a>
					<a href="#">
						<i class="fa-solid fa-envelope-open-text fa-2x"></i>
						<p>Formulaire de contact</p>
					</a>
			</div>
		</section>

CSS

#pieddepage{
	display: flex;
	background-color: 
rgb(0, 0, 0);
	padding-bottom: 10px;
}
.rubriques{
	padding: 10px;
	flex: 1;
  display: flex;
  flex-wrap: wrap;
}
h6{
	font-size: 15px;
	color:white;
	padding: 2px;
	text-align: center;
  width: 100%;
}
.rubriques a{	
	text-align: center;
  flex: 1;
}