JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <link rel="stylesheet" href="css/agev.css">
    </head>
    <body>
        <img src="images/viennalogo.png" class="logo center block">
        <div >
            <p class="p1 center">Welcome! In order to continue your visit on Vienna distribution, you must be of legal drinking age.</p>
        </div>
        <table class="center">
            <tr>
                <th colspan="3" class="th1">WHEN WER<span class="under">E Y</span>OU BORN</th>
            </tr>
            <tr>
                <td><label class="age" for="day">DAY (DD)</label></td>
                <td><label class="age" for="month">MONTH (MM)</label></td>
                <td><label class="age" for="year">YEAR (YYYY)</label></td>
            </tr>
            <tr>
                <td><input type="text" class="input1" name="day" required>
             <div style="
    position: absolute;
    width: 80%;
    height: 100%;
    background: #54b3a1;
    top: 16px;
    left: 16px;
    z-index: 22;
">
                
                </div>
                </td>
                <td><input type="text" class="input2" name="month" required></td>
                <td><input type="text" class="input3" name="year" required></td>
            </tr>
            <tr>
                <td colspan="3"><button class="btn center block">I AM OF LEGAL DRINKING AGE</button></td>
            </tr>
        </table>
        <footer class="ftr">
            <a href="#" class="logo"><img src="images/facebooklogo.png"></a>
            <a href="#" class="logo"><img src="images/instalogo.png"></a>
            <a href="#" class="logo"><img src="images/twitterlogo.png"></a>
        </footer>
        <div class="cookiesdiv center">
            <table>
                    <tr>
                        <td>
                            <p class="pcook">We use cookies on our website to give you the most relevant experience. By clicking “Accept”, you consent to the use of ALL cookies. 
                           ...

CSS

@font-face {
    font-family: futuraptbook;
    src: url(../fonts/futuraptbook.ttf);
}
@font-face {
    font-family: futuraptdemi;
    src: url(../fonts/futuraptbook.ttf);
}
body{
    background: black;
}
.block {display: block;}
.center{
    margin-left: auto;
    margin-right: auto;
}
.logo{
    width: 185;
    height: 161;
}
.p1{
    color:white;
    font-size: 24px;
    text-align: center;
    width: 620px;
    height: 63px;
    line-height: 32px;
    font-family: futuraptbook;
    margin-bottom: 100px;
}
.th1 {
    color:white;
    font-size: 32px;
    line-height: 43px;
    font-family: futuraptdemi;
    padding-bottom: 30px;
}
.age {
    font-size: 15px;
    text-align: left;
    line-height: 20px;
    font-family: futuraptdemi;
    color: white;
    letter-spacing: 1.5px;
}
.input1 {
    width: 176px;
    height: 60px;
    border: 2px solid #FFFFFF;
    background: rgba(0, 0, 0, 0);
    position:relative;
    z-index:111;
    margin-right: 40px;
    color: white;
    font-size: 18px;
    font-family: futuraptbook;
    text-align: center;
}
.input1:focus {
    box-shadow: 0px 0px 0px 0px black;
    width: 218px;
    margin-right: -1px;
    margin-left: -1px;
    border-radius: 0px;
}
.input1:focus ~ div {
display:none;
}

.input1:valid {
    box-shadow: 14px 14px 0px 0px #54B3A1;
    width: 218px;
    margin-right: -1px;
    margin-left: -1px;
    border-radius: 0px;
}
.input2 {
    width: 176px;
    height: 60px;
    border: 2px solid #FFFFFF;
    background: rgba(0, 0, 0, 0);
    box-shadow: 14px 14px 0px 0px #54B3A1;
    margin-right: 40px;
    color: white;
    font-size: 18px;
    font-family: futuraptbook;
    text-align: center;
}
.input2:focus {
    box-shadow: 0px 0px 0px 0px black;
    width: 218px;
    margin-right: -1px;
    margin-left: -1px;
    border-radius: 0px;
}
.input2:valid {
    box-shadow: 14px 14px 0px 0px #54B3A1;
    width: 218px;
    margin-right: -1px;
    margin-left: -1px;
    border-radius: 0px;
}
.input3 {
    width: 176px;
...