JSFiddle - React, Tailwind, and code Playground
by Praveen Kumar Purushothaman
HTML
<div id="aq-block-1076-2" class="aq-block aq-block-aq_text_block aq_span4 aq-first clearfix">
<div class="cp-calc-widget" data-calcid="2424" data-anchor="2">
<form class="widgetForm cleanslate" id="widgetForm" method="post"
style="width: 260px !important; background-color: #378CAF !important;
border-color: #006395 !important; color: #ffffff !important; font-size: 16px !important;">
<input name="numFields" type="hidden" value="1">
<input name="calcId" type="hidden" value="2424">
<input name="answer_format" type="hidden" value="function">
<div class="widgetTitle">Water Intake Calculator</div>
<hr style="color: #006395 !important; background-color: #006395 !important;">
<div class="form_area"><div class="field">Weight:<div class="buffer">
<input class="inputArea" name="input0" value="">
</div>
</div>
<input type="submit" id="widgetSubmit" class="widgetSubmit calc_button" value="Calculate"
style="color: #ffffff !important; background-image: -moz-linear-gradient(top, #378CAF, #006395) !important;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #378CAF),color-stop(1, #006395)) !important;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#378CAF, endColorStr=#006395, GradientType=0 );
border-color: #006395 !important;">
</div>
<div class="answer_area hidden_class">
<div class="loading">loading...</div>
<div class="actual_answer hidden_class">
<span class="pre_answer"></span>
<div class="answer">
<span class="return_answer"></span></div>
</div>
<div>
<input type="button" id="backButton" class="backButton calc_button" value="< back"
style="color: #ffffff !important; background-image: -moz-linear-gradient(top, #378CAF, #006395)...
JavaScript
$(function () {
$("#widgetForm").css({
"border-width": "2px",
"background-color": "#ccc",
"border-color": "#99f"
});
});