<!-- success alert -->
        <div class="alert-success">
            <i class="fas fa-check-circle alert-icon"></i>
            <span class="p-md">Success alert.</span>
        </div>

        <!-- info alert -->
        <div class="alert-info">
            <i class="fas fa-info-circle alert-icon"></i>
            <span class="p-md">Info alert.</span>
        </div>

        <!-- warning alert -->
        <div class="alert-warning">
            <i class="fas fa-exclamation-triangle alert-icon"></i>
            <span class="p-md">Warning alert.</span>
        </div>

        <!-- error alert -->
        <div class="alert-error">
            <i class="fas fa-exclamation-circle alert-icon"></i>
            <span class="p-md">Error alert.</span>
        </div>