JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>


<div id="CPHBigBanner_pnlCoverPhoto">	
	<section class="profile-banner lazy">
		<picture class="profile-herobanner lazy" data-was-processed="true">
			<source type="image/webp" class="lazy" data-srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" data-was-processed="true">
			<img class="lazy loaded" data-src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" alt="" src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" data-was-processed="true">
		</picture>    
	</section>
</div>

</body>
</html>

CSS

.profile-banner {
		display: block;
		height: 500px;
		position: relative;
	}

	.profile-banner picture {
		display: block;
		margin: 0 auto;
		position: absolute;
	}