JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="signup-box">
        <div id="signup-box-head">
        <h1>signing up is easy.</h1>
        </div>
        
        <div id="signup-form">
        <form>
        <input type="text" name="#" value="First Name"/>
        <input type="text" name="#" value="Last Name"/>
        <input type="text" name="#" value="Email"/>
        <input type="password" name="#" value="Create A Password"/>
        <input type="password" name="#" value="Type Your Password Again"/>
            </form>
        </div>
        </div>
            </body>

CSS

body {
background-color: blue;
}    
#signup-box {
    height: 330px;
    width: 350px;
    background-color: black;
    opacity: 0.65;
    border-radius: 8px;
}

#signup-box-head {
    height: 35px;
    width: 310px;
    padding: 5px 20px 0px 20px;
    border-bottom: 2px solid #fff;
}

#signup-box-head h1{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family: vegur;
    font-size: 24px;
    color: #fff;
}

#signup-form {
    margin-top: 10px;
    height: 268px;
    width: 310px;
    padding: 20px 20px 0px 20px;
}

#signup-form form input{
    width: 300px;
    height: 22px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 10px 0px;
    border-radius: 5px;
    border: none;
    background-color: #fff;
    color: #19558d;
    font-size: 18px;
    
}