JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bloc_page">
		<section>
			<article>
				<h1>Quelques articles</h1>		
			</article>

			<aside>
							<!-- Réseaux sociaux -->
				<div id="social">
					<p><a href="https://twitter.com/baldebecaye10"><img src="https://picsum.photos/200/300" alt="Twitter" title="Twitter" /></a></p>
					<p><a href="https://www.instagram.com/becaye_officiel/"><img src="https://picsum.photos/200/300" alt="Instagram" title="Instagram" /></a><p>
				</div>

			</aside>
		</section>

		<footer>
			<p id="contact">Contactez-moi : <a href="mailto:[email protected]" >[email protected]</a><br />
			Créateur du site </p>
			<p><img src="https://picsum.photos/200/300" alt="Créateur du site" title="Becaye"></p>
		</footer>
	</div>

CSS

/* Footer */

footer
{
	display: flex;
	justify-content: space-between;
	font-size: 2em;
	margin-top: 15px;
	padding-top: 15px;
	padding-left: 15px;
}


img[title="Becaye"[#black][/#]]
{
	width: 150px;
	height: 150px;
	margin: -10% 10% 0 -50%;
	border-radius: 150px;
}

/* footer - Pour les smartphones et tablettes */

/* smartphones */

@media all and (min-width: 625px) and (max-width: 1248px)
{
	footer
	{
		font-size: 1.1em;
		margin: 3% 0 0 0;
		padding: 4px;
	}
}

/* Tablettes */

@media all and (max-width: 624px)
{
	footer
	{
		font-size: 0.8em;
		margin: 3% 0 0 0;
		padding: 2px;
	}
}