JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Landing</title>
  <link rel="stylesheet" href="afterbefore.css">
  <script src="script.js"></script>
</head>
<body>

<div  class="container">
    <div class="block-1 x-pink">
        <h1>Lorem Ipsum<span class="x-color-pink">Lorem  </span></h1>
        <p>Le Lorem Ipsum est simplement du faux texte .</p>
        <ul>
            <li>Pourquoi l'utiliser?.</li>
            <li>Pourquoi l'utiliser?.</li>
            <li>Pourquoi l'utiliser? </li>
            <li>Pourquoi l'utiliser? !</li>
        </ul>
    </div>
    <div class="block-2 x-pink">

        <h1>Lorem Ipsum <span class="x-color-pink">Lorem </span></h1>
        <picture>
            <source srcset="https://www.touteleurope.eu/fileadmin/_TLEv3/societe/Tradition_Noel_680.jpg" media="(max-width: 680px)">
                <img src="https://www.touteleurope.eu/fileadmin/_TLEv3/societe/Tradition_Noel_680.jpg" alt="Etam Connect Offre Exclusive"></picture>
        <h3>Lorem Ipsum
             à 19€</h3>
    </div>
</div>


</body>
</html>

SCSS

@mixin max1600 {
    @media screen and (max-width: 1600px) {
        @content;
    }
}

@mixin max1440 {
    @media screen and (max-width: 1440px) {
        @content;
    }
}

@mixin max1240 {
    @media screen and (max-width: 1240px) {
        @content;
    }
}

@mixin min1025 {
    @media screen and (min-width: 1025px) {
        @content;
    }
}

@mixin max1024 {
    @media screen and (max-width: 1024px) {
        @content;
    }
}

@mixin max899 {
    @media screen and (max-width: 899px) {
        @content;
    }
}

@mixin max768 {
    @media screen and (max-width: 768px) {
        @content;
    }
}

@mixin max680 {
    @media screen and (max-width: 680px) {
        @content;
    }
}

@mixin max600 {
    @media screen and (max-width: 600px) {
        @content;
    }
}


*{
    margin: 0;
    padding: 0;
}

.x-pink{
    background-color:#f5deda;
}
.x-color-pink{
    color: pink;
}
img{
    width: 100%;
}

.container{
    display: grid;
    grid-template-columns: repeat(32, 1fr);
    grid-gap: 1rem;
    margin-top: 1rem;
    
    @include max768 {
        display: block;
    }
}

.block-1{
    grid-column: 1/17;
    padding-top: 1rem;
    text-align: center;
    h1{
        text-transform: uppercase;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: .1rem;
        text-align: center;
        font-weight: 700;
        color: #000;
        background-color: #fff;
        margin: .5rem;
        padding: .5rem 3rem;
        display: inline-block;
    }
    p{
        font-size: 1.5rem; 
        color: powderblue;
        margin: 5% auto 5% auto;
       
        &:before{
            content:'';
            background-color: red;
            width: 122px;
            height: 5px;
            display: block;
            margin: auto;
        }
    }
    ul{
        font-size: 1.5rem; 
        color:red;
    }
    @include max768 {
        margin-bottom: 20px;
    }
}
.block-2{
grid-column: 17/33;
padding: 1rem 1.5rem;
text-align:...