JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kelvin's Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>

    <div class = "ParentContainer">
        <div id = "Container1">
            <h1 class = "introText">Certifications</h1>
            <p class = "Text">AWS Certified Developer – Associate <br>
                              Amazon Web Services Training and Certification <br>
                              Expires: October 12, 2026 <br>        
                </p>
        </div>
        
        <div id = "Container2">
            <h1 class = "introText">Work Experience</h1>
            <p class = "Text">
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,,<br> 
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,<br> 
                 sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,<br> 
                qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,<br> 
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,<br> 
                nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui<br> 
                in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
            </p>

            <p class = "Text">
                "Sed ut perspiciatis unde omnis iste natus error...

CSS

html, body {
  margin:0;
    width: 100%;
  height: 100%;
}

.ParentContainer{
  background-color: black;
  margin: 0px;
  padding:0px;
  border: 0px;
  height: 3000px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  position: relative;

}

.Text{
  color:aliceblue;
  font-size: 20px;
}

#Container1{
  width: 50%;
  background-color: red;
  position: absolute; 
  top: 45%;
  left:50%;
  transform: translate(-50%,-50%);
}

#Container2{
  width: 50%;
  background-color: purple;
  position: absolute; 
  top: 70%;
  left:50%;
  transform: translate(-50%,-50%);
}