JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="sticky-nav">
    <div class="inner">
        <span class="message">
            <strong>Error:</strong> You were kicked from the server<button class="close">X</button>
        </span>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    background: #222;
    color: rgba(255, 255, 255, 0.8);
    font-family: sans-serif;
    font-size: 12px;
}
strong {
    font-weight: bold;
}
#sticky-nav {
    height: 35px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(217, 4, 4, 0.7);
}
#sticky-nav > .inner {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
    padding: 0 0.8em;
}
#sticky-nav > .inner > * {
    line-height: 35px;
}
#sticky-nav .message {
    text-shadow: 0 2px rgba(0, 0, 0, 0.42);
}
#sticky-nav .message > .close {
    float: right;
    height: 22px;
    width: 22px;
    line-height: 19px;
    text-align: center;
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#fddb62), to(#e1a510));
    border-radius: 2px;
    text-shadow: 0 2px rgba(0, 0, 0, 0.3);
    margin-top: 6px;
    box-shadow: inset 0 1px 1px 1px rgba(255, 255, 255, 0.6), 0 2px 5px rgba(0, 0, 0, 0.28);
    font-weight: bold;
}