JSFiddle - React, Tailwind, and code Playground

HTML

<div class="password">
        <div class="passwordbox"><input type="text" placeholder="ENTER PASSWORD" class="textbox3"/></div>
        <div class="passwordbutton">PROCEED</div>
    </div>

CSS

.password
{
    width: 370px;    height: 200px;    background-color: rgba(0,0,0,1) ;    position: fixed;    z-index: 100;    top: 50%;    right: 50%; 
    border-style: solid;   border-width: 3px;          border-color: rgb(0,169,202);
}

.passwordbox
{
    width: 250px;    height: 50px;   background: transparent;        margin: auto;      margin-top: 40px;     
}


.textbox3
{
    width: 350px;    height: 35px;   background-color: transparent;   color: white;   border: none;        font-family:"Gears of Peace";
    font-size: 18px;
    font-style: italic;
}
.textbox3::-webkit-input-placeholder { color:white}
.textbox3:-moz-placeholder { color:white }
.textbox3:focus
{
    background-color: transparent; transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s;
}
.textbox3:focus::-webkit-input-placeholder { color:transparent }
.textbox3:focus:-moz-placeholder { color:transparent }


.passwordbutton
{
    width: 300px;    height: 50px;   background: black;   margin: auto;  color: white;   text-align: center;     padding-top: 30px;
}

.passwordbutton:hover
{
    transition-duration: 0.3s;    -webkit-transition-duration: 0.3s;    -moz-transition-duration: 0.3s;    -o-transition-duration: 0.3s;
    background-color: rgb(0,169,202);
}