JSFiddle - React, Tailwind, and code Playground

by mmcsus

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<p class="button3" id="btnShowForm3"> <span class="info"><a id="inline4" href="#Mydiv4"> Avoid Scams </a></span>

</p>
<div id="Mydiv4" style="display:none">
    <div id="useful_info">
         <h2> Useful information </h2>

        <ul>
            <li>Avoid scams by acting locally or paying with PayPal</li>
            <li>Never pay with Western Union, Moneygram or other anonymous payment services</li>
            <li>Don't buy or sell outside of your country. Don't accept cashier cheques
                from outside your country</li>
            <li>This site is never involved in any transaction, and does not handle payments,
                shipping, guarantee transactions, provide escrow services, or offer "buyer
                protection" or "seller certification</li>
        </ul>
    </div>
</div>

CSS

/* Useful info */
 #useful_info {
    background:#ffe5e0;
    border: 1px solid #DDD;
    clear:both;
    padding:15px 20px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    margin-bottom: 10px;
}
#useful_info h2 {
    border:none;
    margin:0;
}
#useful_info ul {
    list-style:disc outside;
    padding-left:20px;
}
#useful_info ul li {
    line-height:18px;
    margin-top:8px;
}
.button3 {
    line-height:normal;
    padding-top:0px;
}
.button3 .info {
    margin: 100px 100px;
}
.button3 span {
    background-color:#84c4ff;
    box-shadow: 1px 1px 1px #c9c6c6;
    border:1px solid #5fb2ff;
    float:left;
    padding:6px 10px 7px;
    -moz-border-top-left-radius:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -moz-border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
    -moz-border-bottom-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-top-right-radius:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.button3 span a {
    text-shadow: #9b9b9b 0 -1px 0;
    color:#FFF;
    float:left;
    text-decoration:none;
}
.button3 span a:hover {
    color:#00FFFF;
}

JavaScript

$(document).ready(function () {
 	                $("a#inline4").fancybox({
 	                    openEffect: 'none',
 	                    closeEffect: 'none',
 	                    scrolling: 'no',
 	                    padding: [0, 0, 0, 0],
 	                    nextEffect: 'fade',
 	                    prevEffect: 'fade',
 	                    loop: false,
 	                    helpers: {
 	                        title: {
 	                            type: 'inside'
 	                        }
 	                    }
 	                });
 	            });