JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
    <form id="search-form">
        <div class="container"><input type="email" /></div>
        <input type="submit" value="Login" />
    </form>
</div>

CSS

body {
    background: url(http://3.bp.blogspot.com/-VW8_PcOFfpk/UfJvjztjYjI/AAAAAAAAAfU/4wrx_NNwGJ0/s1600/Charminar+night+view.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    background-size: cover;
}
.modal {
    position: fixed;   
    background: black;
    top: 10%;
    left: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 40%;
    height: 40%;
}

#search-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px;
    box-sizing: border-box;
    background: red;
}

input[type=email] {
    width: 100%;     
    box-sizing: border-box;
}

@media ( max-width :320px) {
    .modal {
         min-width: 200px;
         min-height: 120px;
    }
}

@media ( min-width :321px) {
    .modal {
         min-width: 300px;
         min-height: 220px;
    }
}

@media ( min-width :640px) {
    .modal {
         min-width: 480px;
         min-height: 320px;
    }
}

@media ( min-width :1200px) {
    .modal {
         min-width: 700px;
         min-height: 400px;
    }
}