Step1 : Override message.js in current theme file on the following path.

– /app/design/frontend/Magemonkey/child/Magento_Theme/web/js/view/

– Add the below code:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @api
 */
define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'escaper',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _, escaper) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            allowedTags: ['div', 'span', 'b', 'strong', 'i', 'em', 'u', 'a']
        },

        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();

            this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.mage.cookies.set('mage-messages', '', {
                samesite: 'strict',
                domain: ''
            });
        },

        RemoveMessage: function () {
            setTimeout(function () {
                $('.page.messages').hide()
            }, 1000);
        },
        /**
         * Prepare the given message to be rendered as HTML
         *
         * @param {String} message
         * @return {String}
         */
        prepareMessageForHtml: function (message) {
            return escaper.escapeHtml(message, this.allowedTags);
        }
    });
});

Step2 : Override messages.phtml in current theme file on the following path.

– /app/design/frontend/Magemonkey/child/Magento_Theme/templates/

– Add the below code:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    
        <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
        <div aria-atomic="true" role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: $parent.prepareMessageForHtml(message.text)"></div>
               <div class="close"  data-bind="click: $parent.RemoveMessage"></div> 
            </div>
        </div>
        
        <!-- /ko -->

        <!-- ko if: messages().messages && messages().messages.length > 0 -->
        <div aria-atomic="true" role="alert" class="messages" data-bind="foreach: {
            data: messages().messages, as: 'message'
        }">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: $parent.prepareMessageForHtml(message.text)"></div>
                <div class="close"  data-bind="click: $parent.RemoveMessage"></div>
            </div>
        </div>
        
        <!-- /ko -->
    
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

that’s it

Here is message design and output :