JSFiddle - React, Tailwind, and code Playground

HTML

<table class="body-wrap">
		<tbody><tr>
			<td></td>
			<td class="container">
				<table style="width: 100%;" cellspacing="0" cellpadding="0">
					<tbody><tr>
                        <td valign="bottom"><b style="border-top-left-radius:5px; border-right:none;">&nbsp;</b></td>
						<td class="text-center" width="64">
                            <img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"></td>
						<td valign="bottom"><b style="border-top-right-radius:5px; border-left:none">&nbsp;</b></td>
					</tr>
				</tbody></table>
				<!-- content -->
				<div class="content">
					<table cellspacing="0" cellpadding="0">
						<tbody><tr>
							<td>
								<h2 class="text-upper text-center mail-header-s">Hello</h2><br><br><br><br><br><br><br>
							</td>
						</tr>
						
					</tbody></table>
				</div> <!-- /content -->

			</td>
			<td></td>
		</tr>
	</tbody>
                            </table>

CSS

/* ------------------------------------- 
		GLOBAL 
------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	width: 100% !important;
	height: 100%;
	font-family: 'Raleway', sans-serif;
}

/* ------------------------------------- 
		ELEMENTS 
------------------------------------- */
a {
	font-family: 'Raleway', sans-serif;
}

.btn-primary {
	background-color: #c26458;
	color: #ffffff;
	padding: 9px 22px;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1px;
	text-decoration: none;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	margin-bottom: 30px;
}

.last {
	margin-bottom: 0;
}

.first {
	margin-top: 0;
}

/* ------------------------------------- 
		BODY 
------------------------------------- */
table.body-wrap {
	width: 100%;
	padding: 40px;
}

/* ------------------------------------- 
		TYPOGRAPHY 
------------------------------------- */
h1,h2,h3 {
	font-family: 'Raleway', sans-serif;
	line-height: 1.1;
	margin-bottom: 15px;
	color: #000;
	margin: 25px 0 0px;
	line-height: 1.2;
	font-weight: 200;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 22px;
}

p,ul {
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 14px;
}

ul li {
	margin-left: 5px;
	list-style-position: inside;
}

.text-upper {
	text-transform: uppercase;
}

.text-center {
	text-align: center;
}


/* main style */
.container {
	display: block !important;
	max-width: 480px !important;
	margin: 0 auto !important; /* makes it centered */
	clear: both !important;
	border: none !important;
	background: transparent !important;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
	padding: 0px;
	max-width: 600px;
	margin: 0;
	display: block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #a3a9ac !important;
    border-top:none !important;
    border-top-left-radius:0px;
   ...