mailgun html invoice email template

This bootstrap snippet called "mailgun html invoice email template" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: email,invoice

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div bgcolor="#f6f6f6" style="color:#333;height:100%;width:100%" height="100%" width="100%">


<table class="m_3013639731041914724body-wrap" bgcolor="#f6f6f6" cellspacing="0" style="border-collapse:collapse;padding:10px;width:100%" width="100%">

    
	<tbody><tr>
		<td width="5px" style="padding:0"></td>
		<td class="m_3013639731041914724outer-container" style="clear:both;display:block;margin:0 auto;max-width:600px;padding:10px 0">
			<table width="100%" cellspacing="0" style="border-collapse:collapse">
				<tbody><tr>
					<td style="padding:0">
                        <a href="http://email.mailgun.net/c/eJw1zDsOgzAMANDTJGNkGzufIQNt1XtEJYFIQBEEcf2yVHrzGyI6XSMBevDAyGQRDRrAF6KVDh7C4J69YlhSncdzNWtueoo8CEEqZEmcTQKhCPskIXgqQbzoOU6tbarrFb1v13WZ__D5LnqPtd3p0fbU8pizOY8f4RMnmQ" style="color:#348eda" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=es&amp;q=http://email.mailgun.net/c/eJw1zDsOgzAMANDTJGNkGzufIQNt1XtEJYFIQBEEcf2yVHrzGyI6XSMBevDAyGQRDRrAF6KVDh7C4J69YlhSncdzNWtueoo8CEEqZEmcTQKhCPskIXgqQbzoOU6tbarrFb1v13WZ__D5LnqPtd3p0fbU8pizOY8f4RMnmQ&amp;source=gmail&amp;ust=1541105359845000&amp;usg=AFQjCNGntns4PHWsu1B54r3PZfU8nc9ybA">
                        <img src="https://ci6.googleusercontent.com/proxy/ln9DZkL16sKtVBjntS3QcpebhvUw-zMYoQC4r2lFK-FUYo9j2iLMUSrl4nAPvJPvrtJ-u0qGipkoiPUUdQ=s0-d-e1-ft#https://assets.mailgun.com/img/mailgun.png" class="m_3013639731041914724logo CToWUd" alt="Mailgun" style="height:50px;max-width:100%;width:157px" height="50" width="157"></a>
                    </td>
					<td class="m_3013639731041914724invoice-date" style="color:#999;font-size:12px;padding:0;text-align:right" align="right">
						Bootdey<br>
						Invoice #3440952<br>
						August 04, 2018
					</td>
				</tr>
			</tbody></table>
		</td>
		<td width="5px" style="padding:0"></td>
	</tr>
	

	<tr>
		<td width="5px" style="padding:0"></td>
		<td class="m_3013639731041914724container" bgcolor="#FFFFFF" style="border:1px solid #e9e9e9;clear:both;display:block;margin:0 auto;max-width:600px;padding:0">
			
			<table class="m_3013639731041914724invoice-paid" width="100%" style="background:#f9f9f9;border-bottom:1px solid #e9e9e9;border-collapse:collapse;color:#999">
				<tbody><tr>
					<td width="50%" style="padding:20px">
						<strong style="color:#333;font-size:24px">$0.00</strong> Paid
					</td>
					<td align="right" width="50%" style="padding:20px">
						Thanks for using <span class="il">Mailgun</span>
					</td>
				</tr>
			</tbody></table>
			
        </td>
<td style="padding:0">
		</td>
<td width="5px" style="padding:0"></td>
    </tr>
    <tr>
		<td width="5px" style="padding:0"></td>
        <td class="m_3013639731041914724container" style="border:1px solid #e9e9e9;border-top:0;clear:both;display:block;margin:0 auto;max-width:600px;padding:0">
            <table cellspacing="0" class="m_3013639731041914724invoice-table-container" style="border-collapse:collapse;border-left:1px solid #f0f0f0;margin:0 auto;max-width:600px">
                <tbody><tr>
                    <td valign="top" class="m_3013639731041914724summary-cell" style="padding:20px">
                        <h3 style="border-bottom:1px solid #e0e0e0;color:#000;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size:18px;font-weight:bold;line-height:1.2;margin:0;margin-bottom:15px;padding-bottom:5px">Summary</h3>
                        <table class="m_3013639731041914724invoice-table" cellspacing="0" style="border-collapse:collapse;margin-bottom:40px">
                            <tbody><tr>
                                <td style="padding:5px 0">Old Plan</td>
                                <td align="right" style="padding:5px 0">Free plan (10,000 msg/month)</td>
                            </tr>
                            <tr>
                                <td style="padding:5px 0">New Plan</td>
                                <td align="right" style="padding:5px 0">Concept Plan</td>
                            </tr>
                            <tr>
                                <td style="padding:5px 0">Prorated subscription amount due</td>
                                <td align="right" style="padding:5px 0">$0.00</td>
                            </tr>
                            <tr class="m_3013639731041914724invoice-total">
                                <td style="border-bottom:2px solid #333;border-top:2px solid #333;font-weight:bold;padding:5px 0">Amount paid</td>
                                <td align="right" style="border-bottom:2px solid #333;border-top:2px solid #333;font-weight:bold;padding:5px 0">$0.00</td>
                            </tr>
                        </tbody></table>
                    </td>
                </tr>
            </tbody></table>
        </td>
		<td width="5px" style="padding:0"></td>
    </tr>

	
	<tr class="m_3013639731041914724footer" style="color:#666;font-size:12px">
		<td width="5px" style="padding:10px 0"></td>
		<td class="m_3013639731041914724outer-container" style="clear:both;display:block;margin:0 auto;max-width:600px;padding:10px 0">
			<table width="100%" cellspacing="0" style="border-collapse:collapse">
				<tbody><tr>
					<td width="40%" valign="top" style="padding:10px 0">
						<h4 style="margin:0">Questions?</h4>
						<p style="color:#666;font-size:12px;font-weight:normal;margin-bottom:10px">Please visit our <a href="http://email.mailgun.net/c/eJw1jUkOwyAQBF8DRzTDZnzg4CTKPwjGi-QFwfD_IEWRWnWoQ_XsceC7l4AOHGjU0iIKFIAvRGsUPIyG4TkxDWfYj7Vd4krEN6-WKJNJMTo9zvHjFghy1BGlcmh7gx9-I8qVqYnJd1_IWfwT8T5_prO2nO9CvPid-kulEiitKYlWvwCXLlQ" style="color:#666" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=es&amp;q=http://email.mailgun.net/c/eJw1jUkOwyAQBF8DRzTDZnzg4CTKPwjGi-QFwfD_IEWRWnWoQ_XsceC7l4AOHGjU0iIKFIAvRGsUPIyG4TkxDWfYj7Vd4krEN6-WKJNJMTo9zvHjFghy1BGlcmh7gx9-I8qVqYnJd1_IWfwT8T5_prO2nO9CvPid-kulEiitKYlWvwCXLlQ&amp;source=gmail&amp;ust=1541105359845000&amp;usg=AFQjCNHtNlDdTskqipAmfMh0UuB2kH-jMg">Support Center</a> with any questions.</p>
					</td>
					<td width="10%" style="padding:10px 0">&nbsp;</td>
					<td width="40%" valign="top" style="padding:10px 0">
						<h4 style="margin:0"><span class="il">Mailgun</span> Technologies</h4>
						<p style="color:#666;font-size:12px;font-weight:normal;margin-bottom:10px"><a href="https://maps.google.com/?q=535+Mission+St.,+14th+Floor+San+Francisco,+CA+94105&amp;entry=gmail&amp;source=g">535 Mission St., 14th Floor San Francisco, CA 94105</a></p>
					</td>
				</tr>
			</tbody></table>
		</td>
		<td width="5px" style="padding:10px 0"></td>
	</tr>
	

</tbody></table>


This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Oct 31st, 15:56

Views: 4