JSFiddle - React, Tailwind, and code Playground

HTML

<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>

<div class="newsletter">
    <span>Newsleter Sign Up <a class="close">Close</a></span>
    Sign up to recieve our latest updates.
    <form>
        <input type="email" name="" placeholder="Email" class="email">
        <select name="">
            <option>Linux</option>
            <option>MacOS</option>
            <option>Windows</option>
        </select>
        <input type="submit" value="Sign Up">
    </form>
</div>

CSS

@media only screen and (max-width: 760px) {
  .newsletter { display: none !important; }
}

.newsletter {
    position:fixed;
    bottom: 10px;
    right:10px;
    background:#EEE;
    border:1px solid #CACACA;
    padding:8px 13px;
    font-size:13px
}
.newsletter span {
    display:block;
    font-weight:700;
    margin-bottom:10px;
    font-size:14px
}
.newsletter .close {
    float:right;
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}
.newsletter .email {
    width:120px
}

JavaScript

function newsletterClose(){
  $( ".newsletter" ).hide("slow");
}
$( ".close" ).click(function() {
  newsletterClose();
});