JSFiddle - React, Tailwind, and code Playground

by David Sch

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> 



<div>

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking. 
                           
       </div>
       	</div>

CSS

.x_cta_error_msg {
			line-height: 1.5;
			background-color: lightgreen;
			padding: 10px 15px 10px 45px;
      height: 50px;
			text-align: center; 
 
      
      }

.x_cta_error_msg::before, .x_simple_cta_error_msg::before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f06a";
font-size: 18px;
left: 15px; 

}