Shipping Status Timeline

Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->

<html dir="ltr" lang="en">

  <head>

    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

    <meta name="x-apple-disable-message-reformatting" />

  </head>

  <body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;">

<!-- Shipping Status Timeline -->
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:550px;margin:40px auto">
    <tr>
        <td style="padding:24px;background:#fff;border:1px solid #dee2e6;border-radius:8px">
            <h2 style="font-size:20px;margin-bottom:24px">Order Status</h2>
            <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
                <tr>
                    <td style="padding-bottom:24px">
                        <div style="display:flex;align-items:center">
                            <div style="width:24px;height:24px;border-radius:12px;background:#28a745;margin-right:12px"></div>
                            <div style="flex:1">
                                <p style="font-size:16px;margin:0 0 4px 0">Order Received</p>
                                <p style="font-size:14px;color:#666;margin:0">Jan 20, 2024 - 10:30 AM</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom:24px">
                        <div style="display:flex;align-items:center">
                            <div style="width:24px;height:24px;border-radius:12px;background:#28a745;margin-right:12px"></div>
                            <div style="flex:1">
                                <p style="font-size:16px;margin:0 0 4px 0">Processing</p>
                                <p style="font-size:14px;color:#666;margin:0">Jan 20, 2024 - 2:45 PM</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom:24px">
                        <div style="display:flex;align-items:center">
                            <div style="width:24px;height:24px;border-radius:12px;background:#ffc107;margin-right:12px"></div>
                            <div style="flex:1">
                                <p style="font-size:16px;margin:0 0 4px 0">In Transit</p>
                                <p style="font-size:14px;color:#666;margin:0">Expected Jan 22, 2024</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="display:flex;align-items:center">
                            <div style="width:24px;height:24px;border-radius:12px;background:#dee2e6;margin-right:12px"></div>
                            <div style="flex:1">
                                <p style="font-size:16px;margin:0 0 4px 0">Delivered</p>
                                <p style="font-size:14px;color:#666;margin:0">Pending</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

  </body>

</html><!--/$-->