JSFiddle - React, Tailwind, and code Playground

Newsletter test

by Andrew Pougher

HTML

<center>
		<table border="0" bgcolor="#F94F1F" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background-color:#F94F1F;">
			<tr>
				<td align="center" valign="middle" id="bodyCell" background="http://brandoral.com/emailerImages/legs-900.jpg" style="background:url('http://brandoral.com/emailerImages/legs-900.jpg') no-repeat center; background-repeat:no-repeat; background-position:center top; background-size:cover;">
					<!--[if gte mso 9]>
					<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:900px;">
					<v:fill type="frame" src="http://brandoral.com/emailerImages/legs-900.jpg" color="#F94F1F" />
					<v:textbox inset="0,0,0,0">
					<![endif]-->
					<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td align="center" height="900" valign="top">
								<!--[if gte mso 9]>
								<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
								<tr>
								<td align="center" valign="top">
								<![endif]-->
								<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer" style="max-width:600px;">
									<tr>
										<td valign="top" style="padding-right:10px; padding-left:10px;">
											<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
												<!-- HEADER -->
												<tr>
													<td align="center" valign="top">
														<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" id="headerContent">
															<tr>
																<td align="center" height="100" valign="bottom">
																	<img src="http://brandoral.com/img/bo1.jpg" width="180" style="border:0; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:16px; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;" alt="MailChimp">...

CSS

/*////// RESET STYLES //////*/
		p{margin:10px 0; padding:0;}
		table{border-collapse:collapse;}
		h1, h2, h3, h4, h5, h6{display:block; margin:0; padding:0;}
		img, a img{border:0; height:auto; outline:none; text-decoration:none;}
		body, #bodyTable, #bodyCell{height:100%; margin:0; padding:0; width:100%;}
	
		/*////// EMAIL STYLE //////*/
		#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
		@-ms-viewport{width:device-width;} /* Force IE "snap mode" to render widths normally. */
		img{-ms-interpolation-mode:bicubic;} /* Force IE to smoothly render resized images. */
		table{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook Desktop. */
		.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Outlook.com to display emails at full width. */
		p, a, li, td, blockquote{mso-line-height-rule:exactly;} /* Force Outlook Desktop to render line heights as they're originally set. */
		a[href^="tel"], a[href^="sms"]{color:inherit; cursor:default; text-decoration:none;} /* Force mobile devices to inherit declared link styles. */
		h1, h2, h3, h4, p, a, li, td, body, table, blockquote{-webkit-font-smoothing:antialiased;} /* Ensure that webkit platforms render fonts smoothly. */
		p, a, li, td, body, table, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based platforms from changing declared text sizes. */
		.ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font{line-height:100%;} /* Force Outlook.com to display line heights normally. */
		a[x-apple-data-detectors]{color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;} /* Force iOS devices to heed link styles set in CSS....