JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="credit-card">
		<header>
                       <span class="title" style="background-image: url('images/fethrpowered.png');"><strong>Card Payment:</strong> Enter payment details</span>
            <a href="#"><span class="close"><img src="images/close.png"/></span></a>
 
            
            
		</header>
		<section id="content">
                            <div class="title"><strong>Payment Mode- Select your payment mode</strong></div>
                
     <input type="radio" id="radio1" name="radios" value="radio1" checked>
   <label for="radio1">Credit Card</label>
         
<input type="radio" id="radio2" name="radios"value="radio2">
   <label for="radio2"">Debit Card</label>
    
    <input type="radio" id="radio3" name="radios"value="radio3">
   <label for="radio3">Internet Banking</label>
            
			<form method="post" id="cardpayment">
				

    
    <div style="float:right;margin-top:50px;">
     <input type='hidden' id='ccType' name='ccType' />
			<ul class="cards">
			<li class="visa">Visa</li>
			<li class="visa_electron">Visa Electron</li>
			<li class="mastercard">MasterCard</li>
			<li class="maestro">Maestro</li>                   
			</ul>
    </div>
                       
    <div class="table form-fields">                   
 <div class="row">
     	<div class="label">Card Number:</div>
						<div class="input full"><input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/><br/></div>

                    
</div>

					
					<div class="row">
						<div class="label">Card Type:</div>
						<div class="input full">
							<select class="styled">
								<option selected>Visa</option>
								<option>Mastercard</option>
                                <option>Maestro</option>
                                <option>SBI Maestro</option>
							</select>
						</div>
						<div class="valid"></div>
					</div>
					<div class="row">
                        						<div class="label">Your...

CSS

* { text-decoration: none; margin: 0; padding: 0; outline: none; box-shadow: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-

box-sizing: border-box !important; -ms-box-sizing: border-box !important; }
	body { font-family: Arial; font-size: 12px; color: #263240; padding: 0px; }
	.left { float: left; }
	.right { float: right; }
	.clear { clear: both; }

	
	a { color: #666; }
	a:hover { color: #333 }
	
	div#credit-card
	{
		display: table;
		width: 540px;
		margin: 0 auto;
		
		border: 1px solid #c1c2c8;
		background-color: #eeeeee;
		-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px 4px;
	}
	
	div#credit-card > header
	{
		padding: 10px;
		border-bottom: 1px solid #c1c2c8;
		
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #dde0e6 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dde0e6)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* IE10+ */
		background: linear-gradient(to bottom, #ffffff 0%,#dde0e6 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dde0e6',GradientType=0 ); /* IE6-9 */
		
		-webkit-border-top-left-radius: 3px;
		-webkit-border-top-right-radius: 3px;
		-moz-border-radius-topleft: 3px;
		-moz-border-radius-topright: 3px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	
	div#credit-card > header .title
	{ 
        
		color: #666;
		font-size: 13px;
		padding: 15px 0;
     
		padding-left: 100px;
		background: no-repeat 20px;
		
		line-height: 32px;
	}
	div#credit-card > header .close
	{
		display: table;
		float: right;

	}
	
	div#credit-card > header...

JavaScript

var radios = document.getElementsByName("radios");
var cardpayment =  document.getElementById("cardpayment");
var internetpayment =  document.getElementById("internetpayment");
cardpayment.style.display = 'block';   // show
internetpayment.style.display = 'none';// hide
for(var i = 0; i < radios.length; i++) {
    radios[i].onclick = function() {
        var val = this.value;
        if(val == 'radio1' || val == 'radio2'){
            cardpayment.style.display = 'block';
            internetpayment.style.display = 'none';
        }
        else if(val == 'radio3'){
             cardpayment.style.display = 'none';
             internetpayment.style.display = 'block';
        }    
            
    }
}