JSFiddle - React, Tailwind, and code Playground

by Felipe Stoker

HTML

<div id="works">	<span class="worksClose cursor-pointer">X   Fechar</span>
	<span class="bar background-white margin-top-30 margin-bottom-30"></span>

    <div class="worksList">
        <!-- Séries -->
        	<h2 class="text-align-center cursor-pointer">
					<i class="fa fa-plus-square-o"></i>
					Series
				</h2>

        <ul class="display-none">
            <li class="display-block grid_100p margin-top-10">	<a class="display-inline-block" href="http://www.lilyhammer.com.br">
							<img class="float-left" src="./images/1.png" alt="Lilyhammer" title="Lilyhammer" width="30" height="30" />
							<h3 class="float-left margin-left-15">Lilyhammer</h3>
						</a>

            </li>
            <li class="display-block grid_100p margin-top-10">	<a class="display-inline-block" href="http://www.punhodeferro.com.br">
							<img class="float-left" src="./images/1.png" alt="Punho de Ferro" title="Punho de Ferro" width="30" height="30" />
							<h3 class="float-left margin-left-15">Punho de Ferro</h3>
						</a>

            </li>
            <li class="display-block grid_100p margin-top-10">	<a class="display-inline-block" href="http://www.westworld.com.br">
							<img class="float-left" src="./images/1.png" alt="West World" title="West World" width="30" height="30" />
							<h3 class="float-left margin-left-15">West World</h3>
						</a>

            </li>
        </ul>
        <!-- Filmes -->
        	<h2 class="text-align-center cursor-pointer">
					<i class="fa fa-plus-square-o"></i>
					Movies
				</h2>

        <!-- Menção Especial -->
        	<h2 class="text-align-center cursor-pointer">
					<i class="fa fa-plus-square-o"></i>
					Special Mention
				</h2>

        <ul class="display-none">
            <li class="display-block grid_100p margin-top-10">	<a class="display-inline-block" href="http://www.pulpfiction.com.br">
							<img class="float-left" src="./images/pulp.png" alt="Pulp Fiction Brasil" title="Pulp Fiction Brasil" width="30" height="30"...

CSS

#works {
    width: 300px;
    height: 100%;
    background: #474747;
    position: fixed;
    right: 0;
    top: 0;
    ;*display: none;*/
    z-index: 3;
    padding: 20px;
    box-sizing: border-box;
}
#works span {
    font: 700 23px/23px"Open Sans";
    text-transform: uppercase;
    color: white;
    text-align: left;
    display: inline-block;
}
.worksList h2 {
    font: 300 15px/30px"Open Sans";
    color: #d9cfcf;
    text-transform: uppercase;
    text-align: left;
}
.worksList h2:hover {
    color: white;
}
.worksList h3 {
    font: 700 15px/30px"Open Sans";
    color: #fff;
    text-transform: uppercase;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.float-none {
    float: none;
}
.display-block {
    display: block
}
.display-inline-block {
    display: inline-block;
}
.display-table-cell {
    display: table-cell;
}
.display-none {
    display: none;
}
/**VERTICAL ALIGN*/
 .vertical-align-middle {
    vertical-align: middle;
}
}

/*BACKGROUND*/
 .background-white {
    background: #fff
}
.background-gray47 {
    background: #474747
}

JavaScript

$(".worksList h2").click(function () {
    $(".worksList ul").slideDown();
    $(".worksList i").removeClass("fa-plus-square-o");
    $(".worksList i").addClass("fa-minus-square-o");
});