JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"> <!-- utf-8 works for most cases -->
	<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
  <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
  <style type="text/css">

  	/* What it does: Remove spaces around the email design added by some email clients. */
  	/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
		html,
		body {
			margin: 0;
			padding: 0;
			height: 100% !important;
			width: 100% !important;
		}
		
		/* What it does: Stops email clients resizing small text. */
		* {
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%;
		}
		
		/* What it does: Forces Outlook.com to display emails full width. */
		.ExternalClass {
			width: 100%;
		}  
		
		/* What it does: Stops Outlook from adding extra spacing to tables. */
		table,
		td {
			mso-table-lspace: 0pt;
			mso-table-rspace: 0pt;
		}
		
    /* What it does: Fixes webkit padding issue. */
    table {
			border-spacing:0 !important;
    }

		/* What it does: Fixes Outlook.com line height. */
		.ExternalClass,
		.ExternalClass * {
    	line-height: 100%;
		}
		
		/* What it does: Fix for Yahoo mail table alignment bug. */
		table {
		  border-collapse: collapse;
		  margin: 0 auto;
		}
		
		/* What it does: Uses a better rendering method when resizing images in IE. */
		img {
			-ms-interpolation-mode:bicubic;
		}
		
    /* What it does: Overrides styles added when Yahoo's auto-senses a link. */
    .yshortcuts a {
			border-bottom: none !important;
    }
    
    /* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
    /* Create a class for every link style needed; this template needs only one for the link in the footer. */
   ...