JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
<table cellpadding="0" cellspacing="0" border="0" style="width:350px; height: 160px; position: absolute; background-color: transparent; font-family: Myriad Pro,Droid Sans; padding-left: 30px;">
        <tbody>
            <tr style="height: 25px; margin: 0px; padding: 0px;">
                <td style="margin: 0px; padding: 0px;">
                    <p style=" color: #494847; font-weight:600; font-size:14px; margin: 0px; padding: 0px;">
                        Redjan Ymeraj
                    </p>
                    <p style=" color: #868584; font-weight:600; font-size:12px; margin: 0px; padding: 0px;">
                        Junior Developer
                    </p>
                    <br>
                </td>
            </tr>
            <tr style="height: 12px; margin: 0px; padding: 0px;">
                <td style="margin: 0px; padding: 0px;">
                    <p style="color: #868584; font-weight:600; font-size:12px; margin: 0px; padding: 0px;">
                        email
                        <span style="color:#494848; margin: 0px; padding: 0px;">
                            :
                        </span>
                        <a href="mailto:redjan.ymeraj@betadvisor.com" target="_blank" style="color: #20aed1;text-decoration:none !important;font-weight:600;font-size:12px;font-family:'Myriad Pro','Droid Sans',sans-serif;">
                            redjan.ymeraj@betadvisor.com
                        </a>
                    </p>
                </td>
            </tr>
            <tr style="height: 12px; margin: 0px; padding: 0px;">
                <td style="margin: 0px; padding: 0px;">
                    <p style="color: #868584; font-weight:600; font-size:12px; margin: 0px; padding: 0px;">
                        Tel
                  ...

CSS

/* Based on The MailChimp Reset INLINE: Yes. */  
		/* Client-specific Styles */
		#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
		body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 
		/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/ 
		.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
		.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
		/* Forces Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */ 
		#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

			
			}
		/* End reset */

		/* Some sensible defaults for images
		Bring inline: Yes. */
		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
		a img {border:none;} 
		.image_fix {display:block;}

		/* Yahoo paragraph fix
		Bring inline: Yes. */
		p {margin: 1em 0;}

		/* Hotmail header color reset
		Bring inline: Yes. */
		h1, h2, h3, h4, h5, h6 {color: black !important;}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}

		h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
		color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
		}

		h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
		color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
		}

		/* Outlook 07, 10 Padding issue fix
		Bring inline: No.*/
		table td {border-collapse: collapse;}

		/* Remove spacing around Outlook 07, 10...