JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<div class="toast toast--green">
  <div class="toast__icon">
    <svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642">
  <path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"></path>
</svg>   
  </div>
  <div class="toast__content">
    <p class="toast__message">Anyone with access can view your invited visitors.</p>
  </div>  </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');

.toast__svg{
  fill:#ffff;
}

.toast {
  text-align:right;
    padding: 2px 0;
    background-color:#fff;
    border-radius:4px;
    max-width: 80%;
    top: 10px;
    position:relative;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
}

.toast:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
  border-top-right-radius:4px;
  border-bottom-right-radius: 4px;
}

.toast__icon{
  position:absolute;
  top:50%;
  right:22px;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  padding: 7px;
  border-radius:50%;
  display:inline-block;
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
  margin-bottom: 0;
    color: #878787;
}

.toast__content{
  padding-left:60px;
  padding-right:70px;
}

.toast--green .toast__icon{
  background-color:#ff4757;
}

.toast--green:before{
  background-color:#ff4757;
}