JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body"> Seitenanfang <br> Einfach weiter runter scrollen
<div class="conversion-icons-container">
    <div class="conversion-icons-inner">
        <div class="conversion-icons-content">		
			<div class="conversion-focused-item circle effect">
                <a href="#">
					<div class="spinner">
					</div>
					<div class="img">
						<img src="https://img.icons8.com/ios/50/000000/delivery--v1.png">
					</div>
					<div class="info">
						<div class="info-back">
							<h3>Schneller Versand</h3>
							<p>Täglicher Versand</p>
						</div>
					</div>
                </a>
			</div>
			<div class="conversion-focused-item circle effect">
				<a href="#">
					<div class="spinner">
					</div>
					<div class="img">
						<img src="https://img.icons8.com/ios/50/000000/security-ssl.png">
					</div>
					<div class="info">
						<div class="info-back">
							<h3>Sicher Einkaufen</h3>
							<p>Dank SSL</p>
						</div>
					</div>
				</a>
			</div>
			<div class="conversion-focused-item circle effect">
				<a href="#">
					<div class="spinner">
					</div>
					<div class="img">
						<img src="https://img.icons8.com/windows/32/000000/data-arrived.png">
					</div>
					<div class="info">
						<div class="info-back">
							<h3>Top <br> Qualität</h3>
							<p>Geprüfte Qualität</p>
						</div>
					</div>
				</a>
			</div>
			<div class="conversion-focused-item circle effect">
				<a href="#">
					<div class="spinner">
					</div>
					<div class="img">
						<img src="https://img.icons8.com/ios-glyphs/30/000000/gender-neutral-user.png">
					</div>
					<div class="info">
						<div class="info-back">
							<h3>Top <br> Service</h3>
							<p>Immer erreichbar</p>
						</div>
					</div>
				</a>
			</div>
        </div>
    </div>
</div>
</div>

CSS

.conversion-icons-container{
    background-color: #ebebeb;
    padding: 1.25rem;
    margin-top: 1000px;
}

.conversion-icons-inner{
    max-width: 1200px;
    margin: auto;
}

.conversion-icons-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.conversion-focused-item.circle{
    position: relative;
	height: 180px;
    width: 180px;
    cursor: pointer;
}

.conversion-focused-item.circle.effect .spinner{
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    border: 10px solid #ffcb05;
    border-right-color: #3b5ca8;
    border-bottom-color: #3b5ca8;
    border-radius: 50%;
    height: 160px;
    width: 160px;
}
.conversion-focused-item.circle .img{
    border-radius: 50%;
    position: relative;
	  height: 160px;
    width: 160px;
}
.conversion-focused-item.circle.effect .img{
    display: flex;
	  position: absolute;
    justify-content: center;
    align-items: center;
    height: auto;
	  width: auto;
    top: 0.625rem;
    bottom: 0.625rem;
    left: 0.625rem;
    right: 0.625rem;
}

.conversion-focused-item img{
	  height: 70%;
    width: 70%;
}

.conversion-focused-item.circle .info{
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.conversion-focused-item.circle.effect .info{
    background: #333333;
    background: rgba(0, 0, 0, 0.6);
	  -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
	  opacity: 0;
    top: 0.625rem;
    bottom: 0.625rem;
    left: 0.625rem;
    right: 0.625rem;
}

.conversion-focused-item.circle.effect .info h3{
    color: #fff;
	  font-size: 18px;
    text-transform: uppercase;
    padding-top: 1.25rem;
    line-height: 30px;
    margin-bottom:...