JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td rowspan="2">
            <div class="icon"></div>
        </td>
        <td class="title">
            Outbound campaign status changed
        </td>
    </tr>
    <tr>
        <td class="message">
            Campaign Predictive A has been unloaded
        </td>
    </tr>
</table>

CSS

.notifications {
    width: 200px;
}

ol {
    list-style: none;
    border: thin solid #ccc;
    padding: 2px;
}

li.important::before {
    /*content: url("/" attr(data-importance) ".png")*/
    content: "!";
    color: red;
    position: relative;
    right: 12px;
    opacity: 1;
    animation: fade 2s linear infinite;
}

@keyframes fade {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

.icon {
    content: url("https://cdn4.iconfinder.com/data/icons/rcons-phone/32/phone-ring-20.png");
    display: inline-block;
}

.text {
    display: inline-block;
    font-size: 12px;
    color: #15428B;
    padding: 2px 0;
    width: 180px;
    overflow: hidden;
}

.message {
    font-size: 11px;
}

li {
    background-color: #bdd3f0;
    white-space: nowrap;
}

table {
    font-family: "Arial, Helvetica, sans-serif";
}