<div id="jGrowl" class="bottom-right jGrowl">
<div class="jGrowl-notification highlight ui-corner-all notify-message jg-alert" style="display: block;">
    <div class="jGrowl-close">x</div>
    <div class="jGrowl-header">Новое уведомление</div>
    <div class="jGrowl-message">
    <a href="#" title="Просмотреть упоминание">
        <span><strong>Duka</strong> упомянул(а) вас в теме:</span>
        <span>«Новые приключения Винни-Пуха»</span>
        <span class="jGrowl-notation">Чтобы прочитать кликните по уведомлению.</span>
        <span class="jGrowl-date"><strong>Сегодня</strong>, в 12:40</span>
    </a>
    </div>
</div>
</div>

<style>
.notify-message {width: 301px !important;}
.notify-message {padding: 12px 10px 5px 10px !important; border-radius: 0px !important;}

.jg-mention {border-left: 12px solid #0076ff;}
.jg-ls {border-left: 12px solid #a2f53b;}
.jg-alert {border-left: 12px solid #ff0d27;}
.jg-gift {border-left: 12px solid #f8f13f;}

.notify-message .jGrowl-header {font-size: 14px !important; font-weight: 400 !important; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px dotted #888;}
.notify-message .jGrowl-message a, .jGrowl-message a:hover {color: #fff !important; text-decoration: none;}
.notify-message .jGrowl-message span {display: block; line-height: 19px;}
.notify-message .jGrowl-close {margin-right: 0px; background: #333; padding: 0px 5px 2px 5px; border-radius: 10px; color: #ccc;}
.notify-message .jGrowl-close:hover {color: #fff; background: #444;}
.notify-message .jGrowl-date {font-size: 11px; text-align: right; padding-top: 3px; border-top: 1px solid #333; width: 170px; margin: 5px 0px auto auto;}
</style>