JSFiddle - React, Tailwind, and code Playground

by Muhammad Faisal Ashfaq

HTML

<table width='320' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="width:320px;margin:0;padding:0;">
    <tr>
        <td width="86" style="width:86px!important;margin:0!important;padding:0!important;">
            <a href='http://campuslogic.com' style="border:none!important;width:125px!important;position:relative!important; top:4px!important;text-decoration:none!important;">
                <img moz-do-not-send="true" src="http://photontechs.com/logo-dark-r3.png" alt="CampusLogic"                                             style="border:none;width:160px;height:54px;">
            </a>
        </td>

        <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">
            &nbsp;
        </td>
        <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;border-left:1px solid #e0e0e0">
            &nbsp;
        </td>
        <td valign='top' style="margin:0;padding:0;">
            <table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="padding:0;margin:0;font-size:15px;color:#b0b0b0;border-collapse:collapse;-webkit-text-size-adjust:none;">
                <tr style="margin:0;padding:0;">
                    <td style="margin:0;padding:0;font-family:Arial;white-space:nowrap;" class="webfont">
                        <strong>
                            <a href="mailto:[email protected]" 
                               style="border:none;text-decoration:underline!important;color:rgb(104, 143, 168);">
                                <span style="color:rgb(104, 143, 168)!important;">
                                    Donette Albano
                                </span>
                            </a>
                        </strong>
                    </td>
                </tr>
                <tr style="margin:0;padding:0;color:#b0a49b;">
                    <td style="margin:0;padding:0;font-family:Arial;white-space:nowrap;" class="webfont1">
  ...

CSS

@font-face {
    font-family: 'proxima_nova_rgregular';
           
    src: url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_regular-webfont.eot');
    src: url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_regular-webfont.woff') format('woff'),
         url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_regular-webfont.ttf') format('truetype'),
         url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_nova_ltlight';
    src: url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_light-webfont.eot');
    src: url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_light-webfont.woff') format('woff'),
         url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_light-webfont.ttf') format('truetype'),
         url('http://photontechs.com/Proxima/mark_simonson_-_proxima_nova_light-webfont.svg#proxima_nova_ltlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
        a{margin:0;padding:0;border:none;}  

  @media screen {
    .webfont {
       font-family: 'proxima_nova_rgregular', arial, sans-serif !important;
    }
      .webfont1 {
       font-family: 'proxima_nova_ltlight', arial, sans-serif !important;
    }
  }