JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wizard" class="swMain">
    <div class="actionBar">
        <div style="display: none;" class="loader">
            Loading
        </div>
        <a href="#" class="buttonFinish uibutton disable">Finish</a>
        <a href="#" class="buttonNext uibutton special icon next">Next</a>
        <a href="#" class="buttonPrevious uibutton special icon prev">Previous</a>
        <div class="msgBox" style="display: block;">
            <div class="content">
                Please correct the errors in step 1 and click next.</div>
            <a class="close" href="#">X</a>
    </div>
    </div>
</div>

CSS

.swMain .msgBox {
  background-color: #FFFFDD;
  border: 1px solid #FFD700;
  border-radius: 5px 5px 5px 5px;
  display:block;
  text-align: left;
  float: left;
  color: #5A5655;
  margin: 4px 0 0 5px;
  min-width: 500px;
  padding: 5px;
  z-index: 999;
}

.swMain .msgBox .content {
    float:left;
    width:auto;
}

.swMain .msgBox .close {
  border: 1px solid #CCCCCC;
  border-radius: 3px 3px 3px 3px;
  color: #CCCCCC;
  display: block;
  float: right;
  margin: 0 0 0 5px;
  outline-style: none;
  padding: 0 2px;
  position: relative;
  text-align: center;
  text-decoration: none;
}

.swMain div.actionBar {
  background-color: #F8F8F8;
  border-top: 1px solid #EEEEEE;
  left: 0;
  padding: 10px;
  text-align: right;
}