JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+DW+Pica&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link rel="icon" href="image/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon" href="image/favicon.png">    

</head>
<body>
    <img src="https://media.istockphoto.com/id/1187580336/fr/vectoriel/mod%C3%A8le-de-conception-abstrait-de-vecteur-pour-leau-ic%C3%B4ne-du-monde-de-leau.jpg?s=1024x1024&w=is&k=20&c=deFYq3zyt1DqhQjZv_L-2V_WAN7x9ZrgJ_JBtTnla-M=" alt="Logo" class="logo">
    <div class="container">
        <h1>Lorem ipsum</h1>
        <h2>Lorem ipsum</h2><br>
        <iframe src="https://radio4/embed?theme=light" 
        frameborder="0" allowtransparency="true" style="width: 60%; min-height: 150px; border: 0;"></iframe>
    </div>
    <blockquote>
        <i>blabla</i><br>
      Machin
    </blockquote>
    <div class="footer">
        <div class="footer-container">
            <div>
                <h3>Lorem ipsum</h3>
                <p>lorem ipsum</p>
            </div>
            <div>
                <h3>lorem ipsum</h3>
                <p><a href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a></p>
            </div>
            <div>
                <h3>lorem ipsum</h3>
                <p><a href="xx.html">lorem ipsum</a></p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
            margin: 0;
            background-image: url('image/a.webp');
            background-color: 
#161616;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            padding: 20px;
            margin-top: 9%;
            flex: 1;
        }

        .logo {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 180px;
            height: 190px;
        }

        h1, h3 {
            font-family: 'IM Fell English SC', serif;
            font-weight: normal;
        }

        h1 {
            margin: 0px 0 0px 0;
            font-size: 9em;
            color: 
#fff;
            text-shadow: 1px 1px 2px 
black;
        }

        h2 {
            font-family: 'IM Fell DW Pica', serif;
            font-weight: normal;
            margin: -40px 0 0px 0;
            font-size: 2.8em;
            color: 
#747474;
            text-shadow: 1px 1px 3px 
black;
        }

        h3 {
            margin: 10px 0;
            font-size: 1em;
            font-weight: normal;
            color: 
#747474;
            text-align: center;
        }

        p {
            font-family: 'IM Fell DW Pica', serif;
            font-weight: normal;
            font-size: 0.9em;
            color: 
#fff;
        }

        blockquote {
            width: 100%;
            text-align: center;
            margin: 0px 0;
            font-family: 'IM Fell DW Pica', serif;
            font-weight: normal;
            color: 
#fff;
        }

        .footer {
            width: 100%;
            background-image: url('image/image.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            color: 
white;
            padding:...