JSFiddle - React, Tailwind, and code Playground

HTML

<section class="service-home">
	<div class="pictures-services">
		<div class="image-service one-service">
			<a href=""><img src="./assets/images/test2.png"></a>
			<h3>Lorem Ipsum</h3>
			<a href="">En savoir plus</a>
		</div>
		<div class="image-service two-service">
			<a href=""><img src="./assets/images/test3.png"></a>
			<h3>Lorem Ipsum</h3>
			<a href="">En savoir plus</a>
		</div>
		<div class="image-service three-service">
			<a href=""><img src="./assets/images/test4.png"></a>
			<h3>Lorem Ipsum</h3>
			<a href="">En savoir plus</a>
		</div>
	</div>
</section>

SCSS

// https://autoprefixer.github.io/
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

.service-home{
	text-align: center;
	padding: 0 100px 100px;
  
	.pictures-services{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
    
		.image-service{
      margin:0 10px;
      background: tan;
    }
  }
}