JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<div class="message"><h1>Unfortunately, this site has been disabled due to non-payment.</h1>

<h3>If you are the owner of this site, you can remove this message by ensuring you have paid for your site in full. Payment will restore your site.</h3>
    
 
    <a href="#" id="pay">Click here to pay</a>    
</div>

<div class="payment">
<h4>The amount owed is £399.</h4>
<p>You can pay me by cheque or paypal. Cheques payable to "Michael Gunner", paypal to "[email protected]".</p>
</div>

CSS

body {
    background:url(http://subtlepatterns.com/patterns/dark_dotted.png) repeat;
    font-family: 'Dosis', sans-serif;
    font-weight:normal;
}
div.message {
    width:400px;
    height:400px;
    margin:0 auto;
    background:url(http://subtlepatterns.com/patterns/white_wave.png) repeat;
    padding:20px;
    margin-top:200px;
    -webkit-box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.24);
}
div.payment {
    width:400px;
    height:120px;
    margin:0 auto;
    background:url(http://subtlepatterns.com/patterns/husk.png) repeat;
    padding:20px;
}
h1 {
    text-align:center;
    font-size:30px;
    color:#333;
    margin-bottom:30px;
    font-weight:400;
}
h3,h4,p {
    text-align:center;
    font-size:14px;
    color:#555;
    font-weight:400;
}
h4 {
    font-size:20px;
}
a {
    display:block;
    width:130px;
    text-align:center;
    color:#fff;
    text-decoration:none;
    padding:15px;
    margin:50px auto;
    border:1px solid #1A83ED;
    border-bottom:7px solid #1A83ED;
    -webkit-box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.21);
    background: #4096ee;   
}
a:hover {
    border-bottom:0px solid #1A83ED;
    margin-top:57px;
}

JavaScript

$('#pay').click(function() {
$('.payment').toggle();
});