JSFiddle - React, Tailwind, and code Playground

HTML

<body bgcolor="#e8ebee"> 

<!-- wrapper table -->
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee">
<tr>
<td>
	<!-- preheader -->
	<table width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
		<tr>
			<td class="preheader responsive-body" height="30" align="center" valign="middle" width="560" style="mso-line-height-rule:exactly; line-height:14px;">
                <!-- spacer table -->
                <table width=""><tr><td height="5" style="height: 40px;line-height: 5px;">&nbsp;</td></tr></table>
                <!-- end spacer table -->
                <span style="font-size:16px; color:#666666;font-family: Helvetica Neue,Helvetica,sans-serif;">
                    Mail onleesbaar? Bekijk de <a href="#" target="_blank" style="color:#666666">online versie</a>
                </span>
             </td>
		</tr>
	</table>
	<!-- end preheader -->

	<!-- spacer table -->
    <table width="100%"><tr><td height="10" style="height: 40px;line-height: 10px;">&nbsp;</td></tr></table>
    <!-- end spacer table -->

	<!-- header basic -->
	<table width="650" bgcolor="#D62A35" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">	
		<tr>
			<td valign="middle" style="background: #FFFFFF;">
				<td align="left" style="padding:10px 10px 10px 15px" bgcolor="#FFFFFF">
                    <a href="#" target="_blank" >
                        <img width="200px" src="img/logo2.png" alt="logo goes here" title="logo goes here" style="display:block;width:200px; max-width:200px;" border="0"/>
                    </a>

                </td>
                <td>&nbsp</td>
                <td mc:edit="date" align="center" style="padding:20px 30px 20px 10px;" >
                    <font style="color:#ffffff;">
                        <p style="padding-top:0px !important;margin-top:0px !important;padding-bottom:0px...

CSS

.ExternalClass *{
			line-height:100%;
		}
		body{
			margin:0;
			padding:0;
			font-family: Helvetica,sans-serif;
		}
		p{
			margin:0;
			padding:0;
			margin-bottom:10px;
		}
		ul,ol{
			margin:5px 0 15px 0;
			padding:0 0 0 15px;
		}
		strong,b{
			color:#333332;
			font-weight:600;
		}
		table{
			border-collapse:collapse;
			border-spacing:0;
			mso-table-lspace:0pt;
			mso-table-rspace:0pt;
		}
		td{
			mso-table-lspace:0pt;
			mso-table-rspace:0pt;
		}
		.link{
			color:#052a5d;
		}
		.read-more{
			color:#052a5d;
			text-decoration:none;
		}
		.button a{
			color:#FFFFFF;
			text-decoration:none;
		}

		.no-underline{
			text-decoration:none;
		}
		.intro-tekst{
			color:#666666;
			font-family:Helvetica,sans-serif;
			font-size:15px;
			line-height:20px;
			margin-top:5px;
			margin-bottom:0;
		}

		.bdyItmPrt img{
			max-width: 100% !important;
		}

	@media only screen and (max-width: 660px){
		table[class=full-table]{
			width:100% !important;
		}

}	@media only screen and (max-width: 660px){
		.no-mobile{
			display:none !important;
		}

}	@media only screen and (max-width: 660px){
		.header-text{
			padding:30px 20px !important;
		}

}	@media only screen and (max-width: 660px){
		.header-image{
			
		}

}	@media only screen and (max-width: 660px){
		.footer-sublogo{
			
		}

}	@media only screen and (max-width: 660px){
		.footer-text{
			width:auto !important;
		}

}	@media only screen and (max-width: 660px){
		.footer-container{
			padding:15px !important;
		}

}	@media only screen and (max-width: 660px){
		.content-container{
			padding:20px 20px 40px 20px !important;
		}

}	@media only screen and (max-width: 660px){
		.item-text-container{
			width:auto !important;
		}

}	@media only screen and (max-width: 660px){
		.item-image{
			align
		}

}	@media only screen and (max-width: 660px){
		.item-title{
			width:calc(100% - 100px) !important;
		}

}	@media only screen and (max-width: 660px){
		.item-text{
			padding:20px 0 0 0...