Em alta
Novidade
Em breve 
				
					/* Container onde ficam os blocos */

/* Para container position asolute funcionar o elemnto pai não pode ser nulo, no mínimo tem q ser relative */

    .container {
        position: absolute;
        top: -12px;
        left: 12px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
Em alta 
				
					<div class="aviso-alta">
Em alta
</div>

<style>
    .aviso-alta {
        display: inline-flex;
        height: 24px;
        padding: 0 8px 0 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        border-radius: 8px;
        background-color: rgba(25, 0, 0, 0.5);
        box-shadow: 0 0 16px 0px #00000A;
        backdrop-filter: blur(8px);
        color: #FF3232;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
    
    .aviso-alta::after {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        width: 16px;
        height: 32px;
        flex-shrink: 0;
        aspect-ratio: 1/2;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32' fill='none'%3E%3Cpath d='M11.3137 20.6863L0 32V22.6274C0 18.384 1.6857 14.3143 4.68629 11.3137L16 0V9.37258C16 13.616 14.3143 17.6857 11.3137 20.6863Z' fill='%23FF3232'/%3E%3C/svg%3E");
    }
</style>
Em breve 
				
					<div class="aviso-breve">
Em breve
</div>

<style>
    .aviso-breve {
        display: inline-flex;
        height: 24px;
        padding: 0 8px 0 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        border-radius: 8px;
        background-color: rgba(75, 75, 0, 0.5);
        box-shadow: 0 0 16px 0px #00000A;
        backdrop-filter: blur(8px);
        color: #FF0;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
    
    .aviso-breve::after {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        width: 16px;
        height: 32px;
        flex-shrink: 0;
        aspect-ratio: 1/2;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32' fill='none'%3E%3Cpath d='M11.3137 20.6863L0 32V22.6274C0 18.384 1.6857 14.3143 4.68629 11.3137L16 0V9.37258C16 13.616 14.3143 17.6857 11.3137 20.6863Z' fill='%23FFFF00'/%3E%3C/svg%3E");
    }
</style>
Novidade 
				
					<div class="aviso-novidade">
Novidade
</div>

<style>
    .aviso-novidade {
        display: inline-flex;
        height: 24px;
        padding: 0 8px 0 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        border-radius: 8px;
        background-color: rgba(0, 50, 25, 0.5);
        box-shadow: 0 0 16px 0px #00000A;
        backdrop-filter: blur(8px);
        color: #00FF64;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
    
    .aviso-novidade::after {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        width: 16px;
        height: 32px;
        flex-shrink: 0;
        aspect-ratio: 1/2;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32' fill='none'%3E%3Cpath d='M11.3137 20.6863L0 32V22.6274C0 18.384 1.6857 14.3143 4.68629 11.3137L16 0V9.37258C16 13.616 14.3143 17.6857 11.3137 20.6863Z' fill='%2300FF64'/%3E%3C/svg%3E");
    }
</style>