JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<!-- Add this condition to center the email in MS Outlook -->
<!--[if mso]>
                <table style="width: 100%;" align="center"><tr><td>
            <![endif]-->
<table width="100%" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td cellspacing="0" cellpadding="0" border="0" valign="middle" align="left" style="background-color: #f9f9f9;height: 40px;">
            <h2 style="margin: 8px 0 8px 16px;font-size: 24px;font-weight: 400;line-height: 24px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;vertical-align:middle;">:Name</h2>
            </td>
            <td cellspacing="0" cellpadding="0" border="0" valign="middle" align="right" style="background-color: #f9f9f9;height: 40px;">
            <a href=":WebURL" title=":Name" style="display: inline-block;margin: 0 16px 0 0; color: #5c7ee5;line-height: 40px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">View property</a>
            </td>
        </tr>
    </tbody>
</table>
<br />
<table class="two-col">
    <tbody>
        <tr>
            <td class="two-col--image">
            <img width="200" alt=":Name" style="display: block;" src=":Image?width=500&amp;height=500&amp;mode=max" />
            </td>
            <td class="two-col--text">
            <table>
                <tbody>
                    <tr>
                        <td style="border-bottom: 1px solid #dbdbdb; padding: 8px 0; color: #676767;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">
                        <strong>Bedrooms:</strong> :Bedrooms
                        </td>
                    </tr>
                    <tr>
                        <td style="border-bottom: 1px solid #dbdbdb; padding: 8px 0; color: #676767;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">
                        <strong>Sleeps:</strong> :Sleeps
                        </td>
                    </tr>
                    <tr>
        ...

CSS

<!-- Add this condition to center the email in MS Outlook -->
<!--[if mso]>
                <table style="width: 600px;" align="center"><tr><td>
            <![endif]-->
<table width="100%" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td cellspacing="0" cellpadding="0" border="0" valign="middle" align="left" style="background-color: #f9f9f9;height: 40px;">
            <h2 style="margin: 8px 0 8px 16px;font-size: 24px;font-weight: 400;line-height: 24px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;vertical-align:middle;">:Name</h2>
            </td>
            <td cellspacing="0" cellpadding="0" border="0" valign="middle" align="right" style="background-color: #f9f9f9;height: 40px;">
            <a href=":WebURL" title=":Name" style="display: inline-block;margin: 0 16px 0 0; color: #5c7ee5;line-height: 40px;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">View property</a>
            </td>
        </tr>
    </tbody>
</table>
<br />
<table class="two-col">
    <tbody>
        <tr>
            <td class="two-col--image">
            <img width="200" alt=":Name" style="display: block;" src=":Image?width=500&amp;height=500&amp;mode=max" />
            </td>
            <td class="two-col--text">
            <table>
                <tbody>
                    <tr>
                        <td style="border-bottom: 1px solid #dbdbdb; padding: 8px 0; color: #676767;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">
                        <strong>Bedrooms:</strong> :Bedrooms
                        </td>
                    </tr>
                    <tr>
                        <td style="border-bottom: 1px solid #dbdbdb; padding: 8px 0; color: #676767;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">
                        <strong>Sleeps:</strong> :Sleeps
                        </td>
                    </tr>
                    <tr>
       ...