JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<div class="notification-bar sandbox" style="top: 0px; ">
    <p>
        Start directly from DevTools next time you visit <b>www.telerik.com?</b> <a href="#" class="button ml10 mr10 pl10 pr10 yes-please">Yes, please</a> <a href="#" class="no-thanks" title="And don't ever show me this notification again!">No, thanks</a>
    </p>
    <a href="#" class="close" title="Close bar">Close bar</a>
    <script type="text/javascript">
        $(document).ready(function () {
            var notificationBar = $('.notification-bar');

            notificationBar.not(':animated').delay(400).animate({ top: "0" });

            notificationBar.find('.close').click(function () {
                notificationBar.not(':animated').animate({ top: "-55px" });

                return false;
            });

            notificationBar.find('.no-thanks').click(function () {
                var service = new Telerik.WebSite.ServiceController.Services.HomePageRememberingService();
                service.SetNoNewHomePage();

                notificationBar.not(':animated').animate({ top: "-55px" });

                return false;
            });

            notificationBar.find('.yes-please').click(function () {
                var service = new Telerik.WebSite.ServiceController.Services.HomePageRememberingService();
                var url = "http://www.telerik.com/developer-productivity-tools.aspx";
                service.SetHomePage(url);

                notificationBar.not(':animated').animate({ top: "-55px" });

                return false;
            });
        });
    </script>
</div>

CSS

.notification-bar p {
padding: 10px 0;
text-align: center;
margin: 0 auto;
max-width: 940px;
}

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}


.notification-bar {
position: absolute;
top: 0px;
left: 0;
right: 0;
height: 45px;
background: #FEF6D4;
z-index: 2001;
font: 400 14px/25px "Segoe UI",Tahoma,arial,sans-serif;
border-bottom: 1px solid #87826C;
-webkit-box-shadow: 0 2px 4px #999;
-moz-box-shadow: 0 2px 4px #999;
box-shadow: 0 2px 4px #999;
}


.notification-bar .close {
position: absolute;
right: 12px;
top: 18px;
width: 14px;
height: 13px;
font: 0/0 a;
background: url(/CSS/Global/icon-close.png) no-repeat 0 0;
}

a {
color: #28A1E2;
}