JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div class="main">
	<h3>Step 1:Your details</h3>
	<div class="outer">
		<div class="inner">
			<label class="lbl">Name<input class="input_cls" type="text" name="name" placeholder="First and last name"></label>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<label  class="lbl">Email<input class="input_cls" type="email" name="email" placeholder="[email protected]"></label>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<label  class="lbl">Phone<input class="input_cls" type="email" name="email" placeholder="[email protected]"></label>
		</div>
	</div>
	<h3>Step 1:Delivery details</h3>
	<div class="outer">
		<div class="inner">
			<label  class="lbl">Address<textarea class="input_cls" style="height:50px;"></textarea></label>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<label  class="lbl">Post code<input class="input_cls" type="email" name="email"></label>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<label class="lbl">Country<input class="input_cls" type="email" name="email"></label>
		</div>
	</div>
	<h3>Step 1:Card details</h3>
	<div class="outer">
		<div class="inner">
			<label>Card type<br><br>	
				<input class="chk" type="radio"  name="opt"> <img src="https://www.oplata.com/static/v1/files/logos/visa-logo-new.png" height="20px" width="40px"> VISA
				<input  class="chk" type="radio" name="opt"> <img src="https://img.clipartfest.com/74bd1529eebd3b2f6cd56efced0acdd5_american-express-by-monolite-clipart-american-express-logo_800-800.png" height="20px" width="40px"> AmEx
				<input class="chk" type="radio" name="opt"> <img src="http://pngimg.com/uploads/mastercard/mastercard_PNG15.png" height="20px" width="40px">Mastercard
			</label>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<label  class="lbl">Card number<input class="input_cls" type="number" name="cardnumber"></label>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<label  class="lbl">Security code<input...

CSS

body
		{
			background-color: #C75C6E
		}
		.outer{
			margin-bottom:10px;

		}
		.inner{
			border: 1px solid #FFFFFF;
			background:rgba(255,255,255, 0.6);
			border-radius: 5px;
			font-family: sans-serif;
			font-size: 12px;
			width: 500px;
			font-weight: bold;
			display: table-cell;

		}
		.input_cls{
			font-family: sans-serif;
			background-color: #FFFFFF ;
			border: 1.5px solid #FFFFFF;
			padding: 5px;
			border-radius: 3px;
			margin-top: 10px;
			margin-bottom: 10px;
			margin-right:80px;
			width: 250px;
			float: right;
		}
		h3
		{
			color: #FFFFFF;
			font-family: sans-serif;
		}

		.main
		{
			display: table;
			margin: 0 auto;
		}

		.btn
		{
			width: 100px;
			height: 25px;
			margin-top: 10px;
			margin-left: 230px;
			border-radius: 15px;
			color: #FFFFFF;
			background-color: #191970;
			border: 1px solid #191970 ;
		}

		.inner label
		{
			
		}

		.lbl
		{
		   line-height: 50px;
		   padding-left: 10px;
		}

		.chk
		{
			display: inline-block;
			margin-left: 40px;
			margin-bottom: 30px;

		}
	}