JSFiddle - React, Tailwind, and code Playground
by Suryar Praveen
HTML
"<style type=\"text/css\">
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
\ncolor: #fff;
\nborder: 1px solid #75ae4c;
\npadding: 0.4em 1em;
\nfont-size: 1em;
\nbackground-color: #99c47c;
\nbackground-image: -webkit-gradient(linear, left top, left bottom, from(#99c47c), to(#75ae4c));
\nbackground-image: -webkit-linear-gradient(top, #99c47c, #75ae4c);
\nbackground-image: -moz-linear-gradient(top, #99c47c, #75ae4c);
\nbackground-image: linear-gradient(to bottom, #99c47c, #75ae4c);
\n
}
\n.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
\nborder: 1px solid #447f19;
\n
}
\n.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
\noutline: none;
\nborder: 1px solid #447f19;
\n
}
\n.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active {
\nbackground-color: #75ae4c;
\nbackground-image: -webkit-gradient(linear, left top, left bottom, from(#75ae4c), to(#99c47c));
\nbackground-image: -webkit-linear-gradient(top, #75ae4c, #99c47c);
\nbackground-image: -moz-linear-gradient(top, #75ae4c, #99c47c);
\nbackground-image: linear-gradient(to bottom, #75ae4c, #99c47c);
\n
}
\n
</style>
<div class=\"mktoFormRow\">
<div class=\"mktoFieldDescriptor mktoFormCol\" style=\"margin-bottom: 10px;\">
<div class=\"mktoOffset\" style=\"width: 10px;\"></div>
<div class=\"mktoFieldWrap mktoRequiredField\"><label for=\"Email\" id=\"LblEmail\" class=\"mktoLabel mktoHasWidth\" style=\"width: 300px;\">
<div class=\"mktoAsterix\">*</div>
</label>
<div class=\"mktoGutter mktoHasWidth\" style=\"width: 10px;\"></div><input id=\"Email\" name=\"Email\" placeholder=\"Email Address\" maxlength=\"255\" aria-labelledby=\"LblEmail InstructEmail\" type=\"email\" class=\"mktoField mktoEmailField mktoHasWidth mktoRequired\" aria-required=\"true\" style=\"width: 300px;\"><span id=\"InstructEmail\" tabindex=\"-1\" class=\"mktoInstruction\"></span>
<div...