JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



<div class="info-panel">
  <i class="fas fa-info-circle"></i>
  <span class="info-text">
    Please copy the path above and paste it into your Slim Global 
    Config file. Then copy your Git path from Slim and add it to this 
    report in the Properties Panel.
  </span> 
</div>

CSS

.info-panel {
  background: #66bde4;
  color: #fff;
  width:375px;
  display: flex;
}
.info-panel i {
    display: flex;
    height: 65px;
    width: 50px;
    flex-direction: column;
    justify-content: center;
    font-size: 32px;
    padding: 0 10px;
}
.info-text {
    padding: 10px;
    line-height: 15px;
    font-family: Arial;
    font-size: 12px;
}