JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<div class="openbloggernotification" id="bloggernotificationWrap" style="display: block; margin-top: 0px;">
<div class="notification-bar" id="notification-bar">
<div class="notification-text"style="text-align:right;"><b> اذا كنت مصمم او مطور ويب وتريد حماية حقوق تصميمك من السرقة يمكنك ذلك فقط</b><a class="button" href="sweup.com"style=" text-align: left">اضغط هنا</a></div></div>
</div>

CSS

.openbloggernotification{
background:#8fa2cb url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQe3aHbnELuH_ILFRBLQnAbX0jGB4bWeSPCt6UxEk1uYFzD1nU1') 50% 50%;}

.attribution {
    color: #888;
    margin-top: 3em;
    text-align: center;
    width: 100%;
}
.attribution a {
    color: #888;
}
.attribution a:hover,
.attribution a:focus {
    color: #7f5261;
}

/* Button - these styles are the good stuff */

.button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
}
.button:hover {
    outline: none;
}
.button:hover,
.button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em...