JSFiddle - React, Tailwind, and code Playground
by Hayriye Aydin
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #f1f1f1; margin: 0 auto; padding: 0; height: 100%; width: 100%;">
<head style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<meta charset="utf-8" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<meta name="viewport" content="width=device-width" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<meta http-equiv="X-UA-Compatible" content="IE=edge" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<meta name="x-apple-disable-message-reformatting" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<title style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"></title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<style type="text/css">@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {u ~ div .email-container{min-width: 320px !important;}}@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {u ~ div .email-container{min-width: 375px !important;}}@media only screen and (min-device-width: 414px) {u ~ div .email-container{min-width: 414px !important;}}@media only screen and (max-width: 100px) {.mailContainer{width: 100%;}}@media only screen and (min-width: 1000px) {.mailContainer{width: 100%;}}</style>
</head>
<body width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #f1f1f1; font-family: 'Poppins', sans-serif; font-weight: 400; font-size:...