JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="error-message-container">
  <ul class="error-message-bell">
    <li aria-hidden="true" class="fa fa-bell-slash-o"></li>
  </ul>
  <ul class="error-message-list">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>consectetur adipiscing elit</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Lorem</li>
    <li>ipsum</li>
  </ul>
</div>

CSS

.error-message-container {
        border: 1px solid blue;
        bottom: 0;
        color: light-blue;
        font-size: 12px;
        left: 0;
        position: fixed;
        text-align: center;
        width: 100%;
}

.error-message-container .error-message-bell {
  display: inline-block;
  font-size: 20px;
  height: 100%;
  margin-top: 0;
  padding: 0;
  vertical-align: middle;
}

.error-message-container .error-message-list {
  display: inline-block;
  font-weight: 500;
  line-height: 1.2;
  list-style-type: none;
  margin-bottom: 11px;
  margin-top: 11px;
  padding-left: 8px;
}