JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="button">
    Toggle
</div>
 
<div class="slider">
asdfasgorug oafugftortrn ffalafgkat afgtoriugtoajsl this is here to cause natural line wrap jugtoregthalkfdajvlkahrt aiuftrwirew jokgag aoir8twlkjf dsvlkjfdakdhflkv flkjghynhfda sfhf lkshftalkjhtfelkghfdalkg jadsfklhdsaflkjdsahflksah fdalkghgf  ajdslfhdsalkjfshdfla fdf
</div>
</div>

CSS

.container {
    width: 400px;
}

.slider {
    font-family: "Droid Sans", "Deja Vu Sans Mono", monospace;
    line-height 1.4;
    color: #00CC00;
    background-color: #121212;
    padding: 1em;
}

.button, .button:visited {
    cursor: pointer;
    font-size: 1.3em;
    font-weight: bold;
    padding: .25em 1em;
    color: white;
    text-decoration: none;
    text-shadow: black 0 1px 4px;
    border-radius: 1.5em;
    width: 150px;
    text-align: center;
    margin-right: 1em;

    background-color: #f85;
    border: 2px solid #e73;
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.59, rgba(255,255,255,0))
        color-stop(0.60, rgba(255,255,255,0.2)),
        color-stop(1.00, rgba(255,255,255,0.6)),
        );
    
    background-image: -moz-linear-gradient(
        center bottom,
        rgba(255,255,255,0) 59%,
        rgba(255,255,255,0.2) 60%,
        rgba(255,255,255,0.6) 100%
        );
}

.button:hover {
    box-shadow: inset 0 0 1em rgba(255,255,255,0.6);}

.button:active {
    box-shadow: inset 0 .5em 1em rgba(0,0,0,0.3);
}

JavaScript

$(".button").click(function() {
    $(".slider").toggle('slow');
});