JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<div class="spoiler"><div class="spoiler-image"></div><span>Title</span></div>

<div class="content"><p>Ciao</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() {
   $(".spoiler").fadeOut("slow");
   $(".content").fadeIn("slow");
});