Tracking Widget

by Brynner

HTML

<style>
.active {
  color: #D82323;
}
</style>

<h1>Tracking Widget</h1>

<h3>Using Table (to mail)</h3>

<table cellspacing="0" style="width:100%; margin-bottom: 20px; font-family: Verdana; font-size: 14px;">
  <tbody>
    <tr>
      <td style="width:33%; padding: 0px;">
        <div style="position: relative; height: 20px;">
          <div style="position: absolute; top: 10px; width: 100%; height: 3px; background-color: green;"></div>
          <div style="display: block; position: absolute; top:0px; z-index: 1; width: 100%; height: 26px; text-align:center;">
            <div style="display:inline-block; width: 20px; height: 20px; text-align:center; background-color: green; border: 3px solid green; border-radius: 20px;"></div>
          </div>
        </div>
      </td>
      
      <td style="width:33%; padding: 0px;">
        <div style="position: relative; height: 20px;">
          <div style="position: absolute; top: 10px; width: 100%; height: 3px; background-color: green;"></div>
          <div style="position: absolute; z-index: 1; width: 100%; height: 26px; text-align:center;">
            <div style="display:inline-block; width: 20px; height: 20px; text-align:center; background-color: white; border: 3px solid green; border-radius: 20px;"></div>
          </div>
        </div>
      </td>
      
      <td style="width:33%; padding: 0px;">
        <div style="position: relative; height: 20px;">
          <div style="position: absolute; top: 10px; width: 100%; height: 3px; background-color: green;"></div>
          <div style="position: absolute; z-index: 1; width: 100%; height: 26px; text-align:center;">
            <div style="display:inline-block; width: 20px; height: 20px; text-align:center; background-color: green; border: 3px solid green; border-radius: 20px;"></div>
          </div>
        </div>
      </td>
      
    </tr>
    <tr>
      <td style="text-align: center; padding-top: 10px;">Planning</td>
      <td class="active" style="text-align:...