<!-- simple toast-->
<div class="toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
<!-- dark toast -->
<div class="toast dark-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle white-btn"></i>
    </button>
</div>
<!-- success toast -->
<div class="toast success-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
<!-- danger toast -->
<div class="toast danger-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
<!-- warning toast -->
<div class="toast warning-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>