<div class="alert success">
    <span class="closebtn" onclick="this.parentElement.style.display='none';"><i
            class="fas fa-times"></i></span>
    <i class="fas fa-check-circle"></i>
    <strong>Success!</strong>
    <p class="alert-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>

<div class="alert info">
    <span class="closebtn" onclick="this.parentElement.style.display='none';"><i
            class="fas fa-times"></i></span>
    <i class="fas fa-info-circle"></i>
    <strong>Info!</strong>
    <p class="alert-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>

<div class="alert warning">
    <span class="closebtn" onclick="this.parentElement.style.display='none';"><i
            class="fas fa-times"></i></span>
    <i class="fas fa-exclamation-triangle"></i>
    <strong>Warning!</strong>
    <p class="alert-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>

<div class="alert danger">
    <span class="closebtn" onclick="this.parentElement.style.display='none';"><i
            class="fas fa-times"></i></span>
    <i class="fas fa-times-circle"></i>
    <strong>Danger!</strong>
    <p class="alert-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>

/*  CSS Messages Alert start  */
.alert {
    padding: 20px;
    color: #4f4f4f;
    border-radius: 5px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;

    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.alert:hover {
    background-color: white;
}

.alert strong {
    padding-right: 10px;
}

.closebtn {
    position: absolute;
    top: 10px;
    right: 0;
    color: rgb(59, 59, 59);
    font-size: 12px;
    cursor: pointer;
}

.fa,
.fas {
    margin-right: 10px;
}

.success {
    background-color: #d6f5d6;
}
.success:hover {
    background-color: #b7efb7;
}

.info {
    background-color: #b3d8f0;
}
.info:hover {
    background-color: #8fc6ea;
}

.warning {
    background-color: #feff99;
}
.warning:hover {
    background-color: #e7e97e;
}

.danger {
    background-color: #ffb3b3;
}
.danger:hover {
    background-color: #ef9e9e;
}

.fa-check-circle,
.fas fa-check-circle {
    color: #4CAF50;
}

.fa-info-circle,
.fas fa-info-circle {
    color: #2196F3;
}

.fa-exclamation-triangle,
.fas fa-exclamation-triangle {
    color: #ff9800;
}

.fa-times-circle,
.fas fa-times-circle {
    color: #f44336;
}

.closebtn:hover {
    color: black;
}

.alert-description {
    width: 100%;
}

@media only screen and (max-width: 600px) {
    .alert {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .fa,
    .fas {
        margin-right: 10px;
        margin-bottom: 10px;
    }

}

/*  CSS Messages Alert end  */

<script>
// Get all alert elements
var alerts = document.getElementsByClassName("alert");

// Show all alerts
for (var i = 0; i < alerts.length; i++) {
    alerts[i].style.display = "flex";
}
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>