JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/LoginRegistrationForm/css/animate-custom.css" />
<a class="hiddenanchor" id="open"></a>
<a class="hiddenanchor" id="close"></a>
<div id="spoiler" class="animate"><a href="#open"><div class="spoiler-image"></div></a><span>Title</span></div>
<div align="center" id="content" class="animate"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra feugiat luctus. Proin aliquet urna id dui iaculis non interdum lorem gravida. Etiam lectus quam, volutpat sed viverra ac, porta nec metus. Etiam at purus ut libero gravida posuere id vitae felis. Curabitur quis nulla purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur imperdiet venenatis ipsum, ut pulvinar elit varius a. Nulla a sapien sit amet risus convallis vehicula. Quisque hendrerit adipiscing imperdiet. Quisque dapibus faucibus quam id pellentesque. Proin viverra lorem vitae turpis laoreet sodales. Cras faucibus posuere molestie.

</p></div>

CSS

#spoiler {
    background-image: linear-gradient(bottom, rgb(0,128,174) 0%, rgb(0,163,222) 75%);
    background-image: -o-linear-gradient(bottom, rgb(0,128,174) 0%, rgb(0,163,222) 75%);
    background-image: -moz-linear-gradient(bottom, rgb(0,128,174) 0%, rgb(0,163,222) 75%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,128,174) 0%, rgb(0,163,222) 75%);
    background-image: -ms-linear-gradient(bottom, rgb(0,128,174) 0%, rgb(0,163,222) 75%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(0,128,174)),
    color-stop(0.75, rgb(0,163,222))
        );
    border: 1px solid #00516f;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    height: 30px;
    line-height: 30px;
    width: 100px;
    margin: auto auto;
    margin-top:15%;
    display: block;
    position: relative;
    z-index: 100000000;
}

#spoiler:hover {
    background-image: linear-gradient(bottom, rgb(0,140,191) 0%, rgb(0,176,235) 75%);
    background-image: -o-linear-gradient(bottom, rgb(0,140,191) 0%, rgb(0,176,235) 75%);
    background-image: -moz-linear-gradient(bottom, rgb(0,140,191) 0%, rgb(0,176,235) 75%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,140,191) 0%, rgb(0,176,235) 75%);
    background-image: -ms-linear-gradient(bottom, rgb(0,140,191) 0%, rgb(0,176,235) 75%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(0,140,191)),
    color-stop(0.75, rgb(0,176,235))
    );
    cursor: pointer;
} 

.spoiler-image {
    background: url(http://dvdimagehosting.altervista.org/images/spoiler.png);
    height: 27px;
    width: 78px;
    border: none; 
    margin: auto auto;
    margin-top: 3px;
}

#spoiler span{
    width: 100px;
    height: auto;
    line-height: 20px;
    padding: 10px;
    left: 50%;
    margin-left: -64px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;    
    font-style: italic;
...

JavaScript

$("#spoiler").click(function() {
$("#content").show();
});