JSFiddle - React, Tailwind, and code Playground
HTML
<footer>
<div>
<h2 class="logo logo-lg self-center text-6xl font-semibold whitespace-nowrap">
Relaps
</h2>
</div>
</footer>
CSS
h2 {
position: absolute;
align-content: center;
justify-content: center;
align-self: center;
width: 100%;
text-align: center;
font-size: 5rem;
font-weight: bold;
}
footer {
height: 400px;
background-image: url('https://d20c7bejsyei13.cloudfront.net/c1c0c6%2Fpreview%2F60761676%2Fmain_full.png?response-content-disposition=inline%3Bfilename%3D%22main_full.png%22%3B&response-content-type=image%2Fpng&Expires=1726144465&Signature=SPdNZ1X38CBMDt~15MOuh93HAStts1Me0V~1h986PHKe1A0Hbh6NmrkRl8FgY32tL~O~7L4bj~ZeG8Krzbcohg1ePTtjJuWCnCqikLOkAOwU8UZW29ut5BJtir92Gw4ILltHDmLoOar~KF58lVR2yquPophJFXHIgQrQ4x57blQTQE~bsCDUNISuOKVihKv6Q57ESJkrFm6F5F0U71Vjpn-vPm~nWiAftQHhD58jnylmubuk9AaLMIdpiMzhVePenZb2TgjGjSuJfRs37TFNlK4PUnLTCkx~E7ue9sfxjU7Fsq4~myUsQkSa476GGAK1SHEXnFcGc2yq~oHHc8ix2g__&Key-Pair-Id=APKAJT5WQLLEOADKLHBQ');
}
footer>div>svg {
width: 100%;
}