<div class="alert alert-colored alert-success">
    <i class="far fa-check-circle"></i> Success! You are good to go
</div>
<!-- this can be turned into border model by replacing alert-colored with alert-border -->
<div class="alert alert-colored alert-error">
    <i class="fas fa-times"></i> Error! Please try again
</div>
<div class="alert alert-colored alert-warning">
    <i class="fas fa-exclamation"></i> Warning! Please review the data
</div>
<div class="alert alert-border alert-warning">
    <i class="far fa-check-circle"></i> Success! You are good to go
</div>