JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

		<section class="body row">
			<h4 class="emi-receipt" contenteditable="true">EMI Receipt</h4>
			<div class="certification" contenteditable="true">This is to certify that Quiklo team has received your EMI for this month. Below are all the details.</div>
			<table class="table">
				<thead>
					<tr>
						<th contenteditable="true">Customer Name</th>
						<th contenteditable="true">Shashikant</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td contenteditable="true">EMI Deposit Date</td>
						<td contenteditable="true">Jan 05, 2016</td>
					</tr>
					<tr>
						<td contenteditable="true">Mode of Payment</td>
						<td contenteditable="true">Cash</td>
					</tr>
					<tr>
						<td contenteditable="true">EMI Due for the month</td>
						<td contenteditable="true">1900</td>
					</tr>
					<tr>
						<td contenteditable="true">Referral bonus for the month</td>
						<td contenteditable="true">2400</td>
					</tr>
					<tr>
						<td contenteditable="true">Net due amount</td>
						<td contenteditable="true">(500)</td>
					</tr>
					<tr>
						<td contenteditable="true">Amount paid</td>
						<td contenteditable="true">0</td>
					</tr>
					<tr>
						<td contenteditable="true">Carryover for next month</td>
						<td contenteditable="true">(500)</td>
					</tr>
				</tbody>
			</table>

CSS

.row{
				margin:10px 15px;
			}
			.table{
				width:100%;
				border:1px solid #09f;
			}
			h4, h5, h6{
				font-weight: 600;
			}
			.emi-receipt{
				text-decoration: underline;
				text-align:center;
				letter-spacing: 1px;
			}
			.certification{
				margin:15px;
				font-size:16px;
			}
			tbody tr:nth-child(odd){
				background-color: rgba(170, 184, 255, 0.4);
				-webkit-print-color-adjust: exact; 
			}
			td, th{
				font-weight: 600;
				color:rgba(0, 110, 255, 0.84);
				padding:5px;
				width:60%
			}
			th{
				font-size: 18px;
			}
			.signImg img{
				width:100px;
				height:100px;
			}
			.quikloImg img{
				width:170px;
			}
			td:nth-child(even), th:nth-child(even){
				border-left:1px solid;
				padding-left:10px;
			}
			thead tr th{
				border-bottom:1px solid #09f !important;
			}
			.signname{
				font-size: 16px;
				font-style: italic;
				margin:5px 0 0 0;
				display: inline-block;
			}
			.signtext{
				margin-top: 10px;
			}
			.table{
				margin-bottom:0;
			}
			.table-footer-text{
				display: inline-block;
				font-style: italic;
				margin-left:15px;
			}
			@media print {
				tbody tr:nth-child(odd) {
				    background: rgba(170, 184, 255, 0.4) !important;
				    -webkit-print-color-adjust:  exact; 
				}
			}
			@media screen {
				tbody tr:nth-child(odd) {
				    background: rgba(170, 184, 255, 0.4) !important;
				    -webkit-print-color-adjust:  exact; 
				}
			}