JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
<h1>Save your brains!</h1>
<a class="button" data-href="https://labs-test.chargebee.com/hosted_pages/plans/basic" href="javascript:void(0)">I want this!</a>                
</div>
<!-- Replace the data-href parameter, with your Hosted page URL-->

CSS

*{
                        margin:0;
                        padding: 0;
                        box-sizing:border-box;
                        -moz-box-sizing:border-box;
                        -webkit-box-sizing:border-box;
                }
                body{
                        font-family: sans-serif;
                        font-size: 14px;
                        color: #000;
                }
                h1{
                        margin-bottom: 50px;
                        font-weight: 500;
                        font-size: 24px;
                }
                .box{
                        max-width: 500px;
                        padding:100px 30px;
                        margin:50px auto;
                        text-align: center;
                        background: #f5f5f5;
                        border:5px solid #4E5C4E;
                        border-radius: 5px;
                        -moz-border-radius: 5px;
                        -webkit-border-radius: 5px;
                }
                .button{
                        padding:12px 30px;
                        border-radius: 50px;
                        background: orange;
                        color: #fff;
                        border:1px solid orange;
                        font-size: 18px;
                }

JavaScript

$(document).ready(function() {
/*
 * A click event for adding start date in url 
 */
        $('.button').on('click', function() {
            var url = $(this).attr('data-href');
            $(this).attr('href', checkoutUrl(url));
        });
    });

    /*
     * This function adds subscription[start_date] parameter to the url
     */
    var checkoutUrl = function(planSpecificUrl) {
	var getRandom = function(min, max) // Returns a random integer between min (included) and max (excluded)
        {
	        return Math.floor(Math.random() * (max - min)) + min;
	    };
	    var now = new Date();//current date 
	    now.setMinutes(now.getMinutes() + now.getTimezoneOffset());//to manage current timezone offset
        if (now.getDate() > 11) {
            now.setDate(12);
            now.setMonth((now.getMonth() + 1));
	        now.setHours(getRandom(6, 23));//setting random hour between 6 to 23
	        now.setMinutes(getRandom(0, 60));//setting random minutes
	        var timestamp = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(),
	        now.getMinutes(), now.getSeconds(), now.getMilliseconds());// converts date => UTC timestamp
	        var futureTimestamp = Math.floor(timestamp / 1000);//converting to support timstamp
	        return planSpecificUrl + '?subscription[start_date]=' + futureTimestamp;
         }
        else{
            return planSpecificUrl;
        }
	};