Css Criar caixa de mensagem, alerta, erro, sucesso, atenção, Info

/* Alerta Erro

----------------------------------------------- */

/* Geral */

.alerta {

padding: 25px;

border: 1px solid gray;

border-radius: 3px;

margin: 10px;

font-size: 18px;

}

.error {

border-color: #e8273b;

color: #FFF;

background-color: #ed5565;

}

.sucesso {

border-color: #87c940;

color: #FFF;

background-color: #a0d468;

}

.atencao {

border-color: #f4a911;

color: #FFF;

background-color: #f6bb42;

}

.info {

border-color: #2f80e7;

color: #FFF;

background-color: #5d9cec;

}

<div class="alerta error">Oh não! Isso foi em forma de pera.</div>

<div class="alerta sucesso">Parabéns! Você fez alguma coisa.</div>

<div class="alerta atencao">Segurem-se, você pode querer verificar isso.</div>

<div class="alerta info">Eu tinha torradas para o café da manhã.</div>

Oh não! Isso foi em forma de pera.

Parabéns! Você fez alguma coisa.

Segurem-se, você pode querer verificar isso.

Eu tinha torradas para o café da manhã.