HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="en">
    <head>

</head>
    <body>
        <main>
       <style>
#container {
height: 300px;
width: 350px;
padding: 10px;
border: 3px double #ccc;
border-radius: 10px;
overflow: auto;
}
 
</style>
<div id="container">
</div>

#scroll2 {
    margin: auto;
border-top: 3.5px groove #ccc;
border-left: 3.5px groove #ccc;
border-right: 3.5px solid #ccc;
border-bottom: 3.5px solid #ccc;
height:10px;
width:75px;
overflow:auto;
}

#scroll3 {
    margin: auto;
 border: 1px solid #000;

font-size: 15px;

text-align: center;
padding: 5px 0;
border-radius: 3px;
overflow:auto;
background: linear-gradient(0deg, rgba(159,159,159,1) 0%, rgba(255,255,255,1) 100%);
height:13px;
width:80px;
}
</style>

<div id="scroll"> sign up, and be saved today!!!
    email <div id="scroll2"> </div>
    username <div id="scroll2"> </div>
    password <div id="scroll2"> </div>
    <p><dp>
        <div id="scroll3"> SUBMIT</div>
        </style>

</main>
    </body>
</html>
<style>
    body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
}
    </style>
<style>
#scroll {
position: relative;
bottom: 270px;
left: 10px;
}
</style>
<style>
#scroll3 {
        font-family: pixel;
position: relative;
bottom: 12px;
left: 0px;
}
</style>

<style>

Check out our Python playground!