JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<!-- Mail Container -->
<div style="box-sizing:border-box;width: 100%; background: #f5f5f5; box-sizing: border-box;font-family:monospace; letter-spacing: -0.32px;">
	
    <!-- divider -->
    <div style="box-sizing:border-box;width: 100%; height: 50px;"></div>
	
    <!-- Mail box -->
    <div style="box-sizing:border-box;max-width: 500px; background: #ffffff; margin: auto; ">
		
        <!-- mail Title -->
        <h2 style="box-sizing:border-box;text-align:center; background: #EC407A; color: #ffffff; padding: 40px 0; border-bottom:10px solid #ca3768;margin:0;">A fost plasata o comanda noua!</h2>


		<div style="box-sizing:border-box;padding: 0 30px; max-width: 500px; background: #ffffff; margin: auto;">
		
            <h4 style="box-sizing:border-box;width: 100%; text-align: left; padding: 30px 0;font-size: 16px;margin:0">Puteti consulta detaliile comenzii mai jos:</h4>

            <!-- Products table heaad -->
            <ul  style="box-sizing:border-box;width:100%;padding:0;margin:0; background: #1eab1e">
                <li style="box-sizing:border-box;display: block;width: 100%;font-size:0;color:#fff;">
                    <strong style="box-sizing:border-box;display:inline-block;font-size:14px; width:50%;padding:2%;text-align:left">Produs</strong>
                    <strong style="box-sizing:border-box;display:inline-block;font-size:14px; width:19%;padding:2%;text-align:center">Cant.</strong>
                    <strong style="box-sizing:border-box;display:inline-block;font-size:14px; width:12%;padding:2%;text-align:center">Pret</strong>
                    <strong style="box-sizing:border-box;display:inline-block;font-size:14px; width:19%;padding:2%;text-align:right">Total</strong>
                </li>
            </ul>
		
            <!-- Products -->
            <ul style="box-sizing:border-box;width:100%;padding:0;margin:0; padding-bottom: 20px; border-bottom: 2px solid #EC407A">
                <?php foreach ($products as $product) {
              ...