JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
     <link rel="stylesheet" href="styles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
 
     <title>Test</title>
 </head>
 <body>
     <main class="main-container">
         <section class="area-1">
             <h2 class="h1">Join our community</h2>
            <p class="subh">30-day, hassle-free money back guarantee</p>
             <p class="p1">Gain access to our full library of tutorials along with expert code reviews.
 Perfect for any developers who are serious about honing their skills.</p>
         </section>
         <section class="area-2">
             <h2 class="h2">Monthly Subscription</h2>
             <div class="para-grid">
                 <p class="p2">&dollar;29</p>
                 <p class="p2-1">per month</p>
             </div>
             <p class="p2-2">Full access for less than &dollar;1 a day</p>
             <div class="button">
                 <p>Sign Up</p>
             </div>
         </section>
         <section class="area-3">
             <h2 class="h3">Why us</h2>
             <p class="p3">Tutorials by industry experts</p>
             <p class="p3">Peer &amp; expert code review</p>
             <p class="p3">Coding exercises</p>
             <p class="p3">Access to our GitHub repos</p>
             <p class="p3">Community forum</p>
             <p class="p3">Flashcard decks</p>
             <p class="p3">New videos every week</p>
         </section>
     </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
}

:root {
    /* COLORS FOR THE AREAS */
    --color-area1: hsl(204, 43%, 93%);
    --color-area2: hsl(179, 62%, 43%);
    --color-area3: hsl(179, 63%, 47%);
    --color-button: hsl(71, 73%, 54%);
    /* COLORS FOR THE TEXT */
    --color-h1: hsl(179, 62%, 43%);
    --color-subh: hsl(71, 85%, 48%);
    --color-p1: hsl(218, 22%, 67%);
}

html {
    font-family: 'Karla', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 100vh;
}

.main-container {
    max-width: 20rem;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 10px;
    overflow: hidden; /* Add this line */
}

/* styling the areas*/

section {
    padding: 1.5rem;
}

.area-2 {
    background: var(--color-area2);
}

.area-3 {
    background: var(--color-area3);
}