JSFiddle - React, Tailwind, and code Playground
by Hugo Carneiro
HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 15px 15px 30px;
background-color: #F8F6F7;
}
table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}
p,
h1,
h2,
h3 {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.card {
width: 270px;
}
.card-title td>* {
vertical-align: middle;
}
@media (max-width: 580px) {
.card {
width: 100% !important;
}
}
</style>
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"
type="text/css" />
<!--<![endif]-->
</head>
<body style="margin: 0;padding: 15px 15px 30px;-webkit-text-size-adjust: 100%;background-color: #F8F6F7;color: #8D8EA5;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" dir="ltr"
style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;margin: 0 auto;background-color: #ffffff;width: 100%;max-width: 580px;font-family: 'Open Sans', arial, helvetica,...