JSFiddle - React, Tailwind, and code Playground

by gothick

HTML

<div id="feedback"><span class="feedback_icon"></span><span class="feedback_text"></span></div>

CSS

#feedback {
  min-height: 24px;
  overflow: hidden;
  background-color: #aacccc;
  line-height: 24px;
  margin-bottom: 10px;
  display: none;
}

#feedback span { display: block; float: left;}
#feedback .feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback .feedback_text { line-height: 24px; display: inline-block; }
#feedback .dialogSuccess { background: transparent url(../img/icons24px.png) no-repeat -48px  0px;  }
#feedback .dialogFail { background: transparent url(../img/icons24px.png) no-repeat -120px  0px;  }
#feedback .dialogInfo { background: transparent url(../img/icons24px.png) no-repeat -96px  0px;  }

JavaScript

$('.feedback_text').html('This is a test of some HTML that might possibly be in the div. This is a very long text  and therefore I ad some extra bits of totally useless gibberish.');
$('.feedback_icon').addClass('wibble');
$('#feedback').fadeIn();