JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
    <link rel="stylesheet" href="D:\Websites\Portfolio\css\main.css">
</head>
<body>
    
        
        <div class = "title"><h1 style = "font-size: 200%;">A Portfolio</h1><h1 >Barney</h1>
        </div> 
    

<div class = "main" id = "mainDiv">
    <div id = "innerDiv" class = "fixed" style="height:1500px;background-color: rgb(255, 255, 255);font-size:36px; transform: translate(0%, 500px)">
    </div>
</div>
<div style = "size: 100%; position: absolute; top: 1000px; left: 20px; overflow: hidden; clip: rect(10px, scrollY ,2px, 100%); background-attachment: fixed" id = "div"><p id = "scrollable">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis felis. Etiam commodo leo nec ante lacinia, ut placerat massa posuere. Morbi consectetur ante metus. Suspendisse potenti. Donec lacus velit, maximus sit amet nulla at, ornare maximus risus. Nunc scelerisque at dui eget finibus. Donec odio leo, tristique vitae mi ac, faucibus rhoncus orci.

        Nam blandit lacus ac vehicula commodo. Mauris hendrerit massa dui, eu accumsan libero semper ut. Proin in vehicula nisl. Nam nec molestie ipsum, a imperdiet diam. Donec scelerisque, tortor id auctor ultricies, lorem erat tristique velit, nec accumsan purus nisi sed nibh. Phasellus varius erat at nibh dignissim, eget maximus diam varius. Sed pulvinar pretium luctus.
        
        Nunc dapibus arcu ligula, quis iaculis sem interdum a. Cras scelerisque eros vel dignissim varius. Nunc vitae interdum felis, ac viverra magna. Phasellus velit lorem, fringilla ut metus sit amet, tincidunt ultricies enim. Vivamus tempor rhoncus erat at molestie. Integer euismod lorem nec nisl ultricies sodales eu sit amet augue. Nullam sit amet eleifend odio. Donec et velit convallis, imperdiet quam at, semper elit. Suspendisse potenti. Aenean non enim risus.
        
        Cras in tellus eget dui imperdiet fringilla eu id sem. Nullam ac ligula tristique ex...

CSS

body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-image: url("https://i.imgur.com/EdAGGFS.jpg");
    overflow: scroll;
}
h1 {
    color: rgb(255, 255, 255);
    font-style: oblique;
    font-size: 500%; 
    top: 0%;
    margin: none;
    position: fixed;

}
.title {
    height: 160px;
    width: 100%;
    position:sticky;
    top: 0%;
    left: 10%;
}
.main {
    width: 100%;
    height:20000px;
    top: 0px;
    margin-top: 300px;
}
.fixed {
    width: 100%;
    height:100%;
    background-color: rgb(255, 255, 255);
    font-size:36px; 
    position: sticky;
    top: -350px;
    overflow-y:wrap;
}