JSFiddle - React, Tailwind, and code Playground

HTML

<section id='cards' class="credit-card visa gr-cards">
        <div class="logo visa-logo">visa</div>
        <div class="logo mastercard-logo"><div></div><div></div></div>
        <form action="./credit.php" method="post">
	 	<input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey"
		type="hidden" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvWpIQFjQQCPpaIlJKpeg
		irp5kLkzLB1AxHmnLk73D3TJbAGqr1QmlsWDBtMPMRpdzzUM7ZwX3kzhIuATV4Pe
		7RKp3nZlVmcrT0YCQXBrTwqZNh775z58GP2kZs+gVfNqBampJPzSB/hB62KkByhE
		Cn6grrRjiAVwJyZVEvs/2vrxaEpO+aE16emtX12RgI5JdzdOiNyZEQteU6zRBRJE
		ocPWVxExaOpVVVJ5+UnW0LcalzA+lRGRTrQJ5JguAPiAOzRPTK/lYFFpCAl/F8wt
		oAVG1c8zO2NcQ0Pko+fmeidRFxJ/did2btV+9Mkze3mBphwFmvnxa35LF+Cs/XJH
		DwIDAQAB" />
		

	<button onclick="javascript:myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
	<button class="btn btn-1 btn-1c">Debit Card</button>
	<button class="btn btn-1 btn-1c">Internet Banking</button>          

            <ul class="inputs">
                <li>
                    <label>Card Number</label>
                    <input type="text" name="cardnumber" pattern="[0-9]{13,16}" class="class=tokenex_data full gr-input" required />
                </li>
		  <li>
			<label>Name on card</label>
			<input type="text" name="card_name" size="20" class="month gr-input" required />
                <li class="expire last">
                    <label>Expiration</label>

			    <div class="dropdown">
      <select name="one" class="dropdown-select month gr-input">
        <option value="">Month</option>
        <option value="1">Jan</option>
        <option value="2">Feb</option>
        <option value="3">Mar</option>
	 <option value="4">Apr</option>
        <option value="5">May</option>
        <option value="6">Jun</option>
	 <option value="7">Jul</option>
	 <option value="8">Aug</option>
	 <option value="9">Sep</option>
	 <option value="10">Oct</option>
	 <option value="11">Nov</option>
	 <option...

CSS

* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }

/* === General === */
body {
    font-family:Arial;
    font-size: 14px;
    background:#ddd;
}

.clearfix {
    clear:both;
}
/* === Credit Card === */
.credit-card {
    display:block;
    position:relative;
    width:93.75%;   /* This is 300px on 320px wide screen */
    max-width:500px;    /* Just to make sure that it doesnt get crazy on bg screens */
    min-width:300px;    /* And make sure that it contains at least some size */
    margin:30px auto;
    padding:20px;
    overflow:hidden;
    border-radius:6px;
    z-index:1;
}

.credit-card .inputs {
    list-style:none;
    margin-top:30px;
    
}

.credit-card .inputs li {
    margin-bottom:30px;
}


.credit-card .inputs li.last {
    margin-bottom:10px;
}

.credit-card .inputs li.expire {
    float:left;
    width:70%;
    margin-right:5%;
}

.credit-card .inputs li.expire input{
    float:left;
    width:35%;
}

.credit-card .inputs li.expire input.month{
    width:30%;
    margin-right:5%;
}

.credit-card .inputs li.cvc-code {
    float:right;
    width:20%;
    

}
.creditcatd .inputs ul.cvc-code{
    display: inline;
}

.credit-card .inputs li.cvc-code input {
    width:70%;
}

.credit-card .visa-watermark, .credit-card .mastercard-watermark {
    position:absolute;
    z-index:10;
    display: none;  
}

.credit-card form {
    position:relative;
    z-index:50;
}

.credit-card .visa-logo, .credit-card .mastercard-logo {
    position:absolute;
    top:15px;
    right:20px;
    text-transform:uppercase;
    font-weight:bold;
    display: none;  
}

/* === Visa === */
.visa {
    color:#fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}

.visa h2 {
    text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}

.visa .visa-logo {
    color:rgba(255,255,255,0.9);
   ...

JavaScript

function myFunction()
{
alert("Hello World!");
}