JSFiddle - React, Tailwind, and code Playground

by gmedina

HTML

<section class="round"> 
      <div id= "notice">
<!-- assuming that there will something with class "flash" rendered here -->        
          <div class="flash">this is the flash div</div>
        </div> 
      <table class="front" summary="For signed-in users"> 
<tr> 
  <td class="main"> 
    <h1 class="micropost">What's happening?</h1> 
    <form accept-charset="UTF-8" action="/microposts" class="new_micropost" data-remote="true" id="micropost_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Fr/gABo8wiqPVXBQvh+uW79ibK2qcNENFKhCBmWv2I8=" /></div> 

  <div class="field"> 
    <textarea cols="40" id="micropost_content" name="micropost[content]" rows="20">            </textarea> 
  </div> 
  <div class="actions"> 
    <input id="micropost_submit" name="commit" type="submit" value="Submit" /> 
  </div>
      </table></section>

CSS

.error, .alert, .notice, .success, #notice, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
#notice {background:#e6efc2;color:#264409;border-color:#c6d880;}

.flash{color:#F00;} /* just add more styles to it */