JSFiddle - React, Tailwind, and code Playground

by Somnath Kharat

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<div id="notice">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar, turpis sed volutpat sollicitudin, velit felis vulputate neque, quis vulputate sapien enim a enim. Mauris at nisi ut neque vehicula dignissim non ac nisi. Nullam id risus ut purus feugiat sagittis ac sed mauris. In nisl justo, egestas sodales pellentesque eu, mollis sed nunc. Suspendisse rutrum ligula vitae enim feugiat sollicitudin eu vel lacus. Nulla malesuada elit ut lorem sodales ac mollis felis cursus. Praesent nec magna nisi, quis sollicitudin sapien. Praesent accumsan cursus magna eleifend convallis. Suspendisse non mi sit amet lorem elementum porttitor. Suspendisse potenti. Duis faucibus lorem nisl, id condimentum eros. Pellentesque ut nibh vel nulla ornare consequat at a mauris. Phasellus non eros in justo accumsan porttitor at eu urna. Sed interdum dignissim commodo.

<button id="closebutton">Close</button>    
</div>

<div id="content">


Nullam in aliquam velit. Donec volutpat porta turpis eu tempus. Ut pellentesque semper erat eget rhoncus. Praesent scelerisque est id nulla rhoncus luctus. Curabitur dignissim ligula ac neque egestas mattis. Suspendisse varius, tellus non tincidunt sodales, tortor ante feugiat tellus, vitae pretium nunc dolor sed tellus. Nulla facilisi. Pellentesque sit amet justo ipsum, eget fringilla nisi. Morbi lacinia lobortis vulputate. Donec viverra dictum arcu, id accumsan neque volutpat sed. Maecenas non dui eu nisl scelerisque eleifend. Cras eu blandit nisl. Ut sodales cursus lectus pharetra congue. Quisque ac lorem eu elit convallis convallis a at nisi. Aenean a ipsum at nisl interdum faucibus.

Praesent tincidunt fermentum placerat. Pellentesque ornare rutrum neque bibendum tempus. Nam sed odio nulla. Fusce lacus dolor, bibendum...

CSS

#notice {
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0 ;
font: bold smaller sans-serif;
}

JavaScript

$(function() {
        $( "#closebutton" ).button({
            icons: {
                primary: "ui-icon-close"
            },
            text: false
        });

        $( "#closebutton" ).click(function(event)
        {
            $("#notice").fadeOut('slow');
        });
        
    });