Lastest update:
The another code works correctly at iCloud but in Gmail shows wrong, so changing some stuffs the final code to show correct at iCloud, Gmail and any popular provider is:
<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body style="font-size: 17px; line-height: 25px; color: #f1f1f1; font-family: 'Open Sans', sans-serif; font-weight: 400; margin: 0px; background-color: #070B41;">
<!-- this ensures Gmail doesn't trim the email -->
<span style="opacity: 0"> {{ randomness }} </span>
<table width="1140" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #030521de; border-radius: 20px; overflow: hidden; margin: 20px auto 20px auto;">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding: 50px 40px 50px 65px;">
<tbody>
<tr>
<td colspan="2" style="padding-bottom: 40px;">
<img src="https://i.imgur.com/7nQbkxQ.png" style="max-width: 430px;" width="100%" height="auto" alt="logo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 25px; font-size: 22px; font-weight: 700; color: #fff;">
<span>Hola, {$user_first_name}.</span>
</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 30px;">
<span>Necesitamos verificar su dirección de correo electrónico. Esto es necesario para confirmar la propiedad del mismo.</span>
<span style="display: block;"><a href="{$verification_url}" style="text-decoration: none; color: #f0ca10">CONFIRMAR CORREO ELECTRÓNICO</a></span>
</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 30px;">
<span>Si tiene problemas, intente copiar y pegar la siguiente URL en su navegador:</span>
<span style="display: block; text-decoration: none; color: #1094f0;">{$verification_url}</span>
</td>
</tr>
<tr>
<td colspan="2">
<span>Este enlace es válido solo por 60 minutos. Si ha caducado, inicie sesión en nuestro <a href="{$whmcs_url}" style="text-decoration: none; color: #1094f0;">área de clientes</a> para solicitar un nuevo enlace.</span>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-top: 30px;">
<tbody>
<tr>
<td style="border-top: 1px solid #707070;"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding: 30px 40px 30px 65px;">
<tbody>
<tr style="vertical-align: middle;">
<td style="padding-bottom: 20px; font-size: 15px; font-weight: 500; color: #1094F0;">
<a href="https://universalgg.com" style="text-decoration: none; color: #1094f0;">Sitio web</a> |
<a href="{$whmcs_url}" style="text-decoration: none; color: #1094f0;">Área de clientes</a> |
<a href="mailto:info@universalgg.com" style="text-decoration: none; color: #1094f0;">Contactar</a>
</td>
<td style="padding-bottom: 13px; text-align: right;">
<a href="https://twitter.com/UniversalGamg"><img src="https://i.imgur.com/tw6ULqv.png" style="display: inline-block; margin-right: 15px; width: 20px; height: auto;" alt="icon"></a>
<a href="https://www.instagram.com/universal_gg/"><img src="https://i.imgur.com/Ulql9vH.png" style="display: inline-block; margin-right: 15px; width: 20px; height: auto;" alt="icon"></a>
<a href="https://discord.gg/nMxTQ5UZpM"><img src="https://i.imgur.com/HZMV6Ic.png" style="display: inline-block; margin-bottom: -1.5px; width: 20px; height: auto;" alt="icon"></a>
</td>
</tr>
<tr>
<td colspan="2" style="color: #DDDDDD; font-size: 12px; text-align: center;">
2018-2023 © {$company_name}
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 50%; background-image: url('https://i.imgur.com/xldJQPy.jpg'); background-position: left; background-size: cover; background-repeat: no-repeat;"></td>
</tr>
</table>
<!-- this ensures Gmail doesn't trim the email -->
<span style="opacity: 0"> {{ randomness }} </span>
</body>
</html>
Gmail don't trust in all domains to show images, so i am using imgur.com.
Gmail will hide content if you don't set
<!-- this ensures Gmail doesn't trim the email -->
<span style="opacity: 0"> {{ randomness }} </span>
I add some amp integrations that works with Gmail.
Don't add a CSS style tag in head. For some reason some providers only get the style at the same code line.
Only Google Official Fonts will work. Custom fonts in Gmail won't be allowed.
iKaros's post in WHMCS PRODUCT CSS ERROR was marked as the answer