JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<a href="#" id="ppl-offer" class="offer-btn">Exciting Offers</a>

<div class="detail" style="display:none;">
    <a href="#" id="ppl-offer" class="close-btn">x</a>
    <p>Lorem  ipsum  dolor sit amet, consectetur adipiscing elit. Fusce  facilisis  sagittis  lectus. Curabitur quam arcu, adipiscing quis pretium  in,  pharetra  eget dolor.</p>
    <ul>
        <li>List Item sample 1</li>
        <li>List Item sample 1</li>
        <li>List Item sample 1</li>
        <li>List Item sample 1</li>
        <li>List Item sample 1</li>
    </ul>
</div>

CSS

.offer-btn{
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px  1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
    background:#eee;
    border:0;
    color:#333;
    cursor:pointer;
    margin:0;padding:6px 4px;
    text-decoration:none;
    position:relative
}
.close-btn{
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px  1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
    background:#eee;
    border:0;
    color:red;
    cursor:pointer;
    margin:0;padding:0;
    text-decoration:none;
    font-family:arial;
    position:absolute;
    right:0px;
    top:0;
}
.detail{
    border:1px solid #eee;background:#eee;
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    width:400px;
    padding:10px;
    margin:10px 0;
    position:relative;
    z-index:5555;
}

.detail ul{list-style:disc inside;}

JavaScript

$(document).ready(function() {
    
    $('a#ppl-offer').click(function() {
        $('.detail').slideToggle(500);
        return false;
    });
});