JSFiddle - React, Tailwind, and code Playground

by Deka

HTML

<p class="txt-info">
	Terima kasih telah melakukan pembelian member ZFix.
</p>
<table id="tbl_wpr">
	<tr>
		<td class="txt-wpr-td">
		</td>
	</tr>
	<tr>
		<td>
			<!-- START OF TABLE CODE -->
			<table id="tbl_code">
				<tr>
					<td class="info">Kode aktivasi Anda adalah</td>
				</tr>
				<tr>
					<td class="code_wpr">
						<span class="code">2000004D8458DW123</span>
					</td>
				</tr>
			</table>
			<!-- END OF TABLE CODE -->
		</td>
	</tr>
	<tr>
		<td>
			<!-- START OF TABLE SUMMARY -->
			<table id="tbl_summary">
				<tr>
					<td colspan="2" class="txt-title">
						Ringkasan Pembelian
					</td>
				</tr>
				<tr>
					<td width="50%">
						<span class="txt-label">
							TIPE DEVICE
						</span>
						<br/>
						<span class="txt-value">
							iPhone 7
						</span>
					</td>
					<td width="50%">
						<span class="txt-label">
							PAKET PEMBELIAN
						</span>
						<br/>
						<span class="txt-value">
							Paket A
						</span>
					</td>
				</tr>
				<tr>
					<td>
						<span class="txt-label">
							TANGGAL PEMBELIAN
						</span>
						<br/>
						<span class="txt-value">
							07 Oktober 2019
						</span>
					</td>
					<td>
						<span class="txt-label">
							TANGGAL EXPIRED
						</span>
						<br/>
						<span class="txt-value">
							10 Oktober 2019
						</span>
					</td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
			</table>
			<!-- END OF TABLE SUMMARY -->
		</td>
	</tr>
	<tr>
        <td>
            <table id="tbl_steps_wpr">
                <tr>
                    <td bgcolor="#F9F9F9">
                        <!-- START OF TABLE STEPS -->
                        <table id="tbl_steps">
                            <tr>
                                <td colspan="2" class="txt-title">
                                    Cara Aktivasi
                                </td>
                            </tr>
                            <tr>
               ...

CSS

p, ul, li, div, span, table, tr, td {
	font-family : Avenir,Helvetica,sans-serif;
	font-size : 16px;
	color: #5d5d5d;
}
a {
	color: #0000EE: 
}
ul {
	list-style-type : none;
	margin : 0;
	padding : 0;
}
table {
	width: 100%;
	margin: 0;
	padding : 0;
	border-collapse: collapse;
}
table table {
	border: 0;
}
table table td {
	border : 0;
}
table .txt-wpr-td {
	border: 0;
	padding : 5px 0 0;
}
table .txt-title {
	color : #2B4B99;
	font-weight : bold;
}

#tbl_wpr {
	margin: 0 auto;
	border-top : 1px solid #EDEDED;
	border-right : 1px solid #EDEDED;
	border-bottom : 1px solid #EDEDED;
	border-left : 1px solid #EDEDED;
}


#tbl_code {
	border-bottom: 1px solid #EDEDED;
	text-align : center;
}
#tbl_code td {
	padding : 10px;
}
#tbl_code .info {
	padding : 15px 0 0;
	font-size: 16px;
}
#tbl_code .code_wpr {
	padding : 5px 0 15px;
}
#tbl_code .code {
	display : inline-block;
	color : #3153A4;
	font-size : 26px;
	font-weight : bold;
}

#tbl_summary {
	
}
#tbl_summary td {
	padding : 20px 30px 0;
}
#tbl_summary .txt-label {
	line-height : 2;
	font-weight : bold;
	color: #000;
	font-size : 12px;
}

#tbl_steps_wpr {
	padding : 20px 0 0;
}
#tbl_steps_wpr td{
	padding : 20px;
}
#tbl_steps_wpr .menu {
	color : #545454;
	font-weight: bold;
}
#tbl_steps td {
	vertical-align: middle;
	padding : 15px;
}
#tbl_steps .order {
	font-size : 28px;
	font-weight: bold;
	color : #C1C1C1;
	padding-right: 5px;
}