JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="col-md-12">
<div class="success-alert">
this is a positive alert
</div>
<div class="danger-alert">
this is a positive alert
</div>
</div>
</div>

CSS

.success-alert {
    border: 1px solid #e6e6e6;
    page-break-inside: avoid;
    padding: 10.5px 21px;
    margin: 0 0 21px;
    font-size: 18.75px;
    border-left: 5px solid #3fb618;
  }
  
 .danger-alert {
    border: 1px solid #e6e6e6;
    page-break-inside: avoid;
    padding: 10.5px 21px;
    margin: 0 0 21px;
    font-size: 18.75px;
    border-left: 5px solid #ff0039;
  }