JSFiddle - React, Tailwind, and code Playground

by besign

HTML

<div style="background:#1ABC9C">
		<table align="center" style="width:500px; padding:20px;color:#FFFFFF;font-family:Sans-serif;text-align:center; font-weight:100"><tr><td>
			<img src="http://flamboyant.com.ve/wp-content/uploads/2017/02/Logo-flamboyant-300x230.png" width="170" alt="Residencias Flamboyant" title="Residencias Flamboyant">
		<h1>¡Bienvenid@ [first_name]!</h1>
		<h2 style="color:#33333">
      Ya tienes un usuario en la web FLAMBOYANT
    </h2>
		<table width="220px" align="center" style="text-align:center;background:#1AA589; padding:20px 10px 20px 10px;font-size:16px; border-radius:7px">
			<tr><td style="text-align:center">Usuario:  [user_login]<br></td></tr>
			</table>
<p><small style="font-size:12px;line-height:24px">
<table width="220px" align="center" style="background:#6DC84D; padding:10px 15px 10px 20px; border-radius:25px;text-align:center">
			<tr><td><a href="[reset_pass_url]" style="color:#FFFFFF;text-decoration:none; font-weight:bold; font-size:12px; text-align:center">DEFINIR TU CONTRASEÑA</a></td></tr>
			</table><br>Para fijar tu clave haz click en el botón de arriba<br><br>
      Desde la página tendrás habilitadas opciones sólo disponibles para los usuarios registrados. ¡Gracias por unirte a la comunidad!</small><br>
		</p>
		</td>
		</tr><tr>
		<td>
			<table width="220px" align="center" style="background:#159079; padding:10px 15px 10px 20px; border-radius:25px;text-align:center">
			<tr><td><a href="[reset_pass_url]" style="color:#FFFFFF;text-decoration:none; font-weight:bold; letter-spacing:2px;font-size:10px; text-align:center">INGRESAR YA</a></td></tr>
			</table>
		</td>
		</tr>
	</table>
</div>