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></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. 
                            Alternatively, you may click “Cookie Settings” to provide a controlled consent.</p>
                        </td>
                        <td>
                            <button class="ckbtn1">ACCEPT</button>
           ...

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);
    box-shadow:14px 14px 0px 0px #54B3A1;
    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: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;
    height: 60px;
    border: 2px...