JSFiddle - React, Tailwind, and code Playground

by code_rum

HTML

<div class="example2">
    <p>This is some text This is some textThis is some textThis is some textThis is some text
    This is some textThis is some textThis is some textThis is some textThis is some text</p>
</div>

CSS

.button{
    -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;
    font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
    margin:0;padding:6px 4px;
    text-decoration:none;
    position:relative
}
.example1 p, .example2 p{
    border:1px solid #eee;background:#eee;
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    width:400px;
    padding:10px;
    margin:10px 0
}

JavaScript

$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
    $('a#toggle-example2').click(function() {
        $('.example2').slideToggle(1000);
        return false;
    });