JSFiddle - React, Tailwind, and code Playground
by vivek07mishra
HTML
<body yahoo style="margin:0; padding:0; min-width: 100%!important;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="750" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="center" class="content" cellpadding="0" cellspacing="0" width="100%" style="max-width:750px;border-collapse:collapse;">
<tr>
<!-- HEADER STARTS HERE -->
<td class="header">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;">
<tr>
<!-- Feature Box STARTS HERE -->
<td class="feature_box" bgcolor="#ffffff" style="padding:0 0 0px 0px;font-size:12px;line-height:14px;font-family:Arial;color:#000000;">
<!--[if (gte mso 9)|(IE)]>
<table width="750" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="750" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;">
<a href="http://www.thedeal.com/marketing/main/DD_features_landing.html" style="text-decoration:none;outline:none;border:none;">
<img src="http://www.thedeal.com/newimages/DD_featuresbox_750x368.png" alt="FEATURES IN THE NEW DAILY DEAL" width="750" style="max-width:750px;border:none;outline:none;">
</a>
</td>
<td style="display:none;">
<![endif]-->
<a href="mailto:[email protected]" style="text-decoration:none;outline:none;border:none;">
<img src="http://www.thedeal.com/newimages/DD_featuresbox_750x368.png" alt="FEATURES IN THE NEW DAILY DEAL" width="100%" style="max-width:770px;border:none;outline:none;">
</a>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
...
CSS
img {height: auto;}
div {text-align:left;}
.fix {display: block;}
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .view-pdf {margin:20px 0 0 0 !important;display:none;}
body[yahoo] .col535 {border:0 !important;}
body[yahoo] .col550 img {width:290px !important;}
body[yahoo] .left_column_stack {padding:0 !important;}
body[yahoo] .main_column {padding:15px !important;}
body[yahoo] .footer {padding:15px !important;}
body[yahoo] .top_ad_image {width:100% !important;}
body[yahoo] .arb_chart {display:none;}
body[yahoo] .intro_text {display:none;}
body[yahoo] .top_ad {display:none;}
body[yahoo] .main_container {padding: 0 !important;}
body[yahoo] .connections {margin: 20px 0 0 0 !important;width:300px !important;}
body[yahoo] .grey_connections {width:300px !important;}
body[yahoo] .top_story_content {width:100%;max-width:100% !important;text-align:left;}
body[yahoo] .feature_box {display:none !important;}
body[yahoo] .feature_box_500 {display:block !important;}
body[yahoo] .feature_box_320 {display:none !important;}
body[yahoo] .top_img_area {display:block !important;height:130px !important;padding:0 0 20px 0 !important;}
body[yahoo] .top_img_area img {position:absolute !important;margin: 0 0 20px 0px !important;}
}
@media only screen and (max-width: 320px), screen and (max-device-width: 320px) {
body[yahoo] .feature_box {display:none !important;}
body[yahoo] .feature_box_500 {display:none !important;}
body[yahoo] .feature_box_320 {display:block !important;}
}
@media only screen and (max-width: 749px), screen and (max-device-width: 749px) {
body[yahoo] .col535 {border:0 !important;max-width:100% !important;}
body[yahoo] .main_column {padding:15px !important;}
body[yahoo] .right_column {padding:25px 0 0 0 !important;}
body[yahoo] .view-pdf {margin:10px 0 0 0 !important;}
}
/* Please Remove this comment when Emailing. Its a fix for Apple Mail
@media only screen...