JSFiddle - React, Tailwind, and code Playground

by Felipe Stoker

HTML

<li class="homeListagemLi">
    <div class="homeListagemDiv">
        <ul>
            <li>
                <img src="./imagens/pessoa.jpg" height="220" width="220" />
            </li>
            <li><strong>teste</strong>

            </li>
            <li><span>Cargo: Redação</span>

            </li>
            <li><span>Status: Não definido</span>

            </li>
            <li>
                <p>Inscrição: 10/05/2014</p>
            </li>
            <li>
                <p>Última atualização: 10/08/2014</p>
            </li>
            <li>
                <p>Escolaridade: Superir Completo</p>
            </li>
            <li class="homeListagemLiBt"></li>
            <li class="p-relative">
                <div class="buscaAvanHoverDiv">
                    <ul>
                        <li><span>Salário: R$ 1.000,00</span>

                        </li>
                        <li><span>Experiência: haha</span>

                        </li>
                        <li class="clear"></li>
                        <li>
                            <p>Estado civil: Solteiro(a)</p>
                        </li>
                        <li>
                            <p>Idiomas: Inglês (intermediário)</p>
                        </li>
                        <li>
                            <p>Facebook: fbfbfbf</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="homeListagemLi">
    <div class="homeListagemDiv">
        <ul>
            <li>
                <img src="./imagens/pessoa.jpg" height="220" width="220" />
            </li>
            <li><strong>teste</strong>

            </li>
            <li><span>Cargo: Redação</span>

            </li>
            <li><span>Status: Não definido</span>

            </li>
            <li>
                <p>Inscrição: 10/05/2014</p>
            </li>
            <li>
                <p>Última atualização:...

CSS

.homeListagemLi{
	width: 284px;
	height: 432px;
	float: left;
	margin-right: 30px;
	background-color: white;
	margin-bottom: 30px;
	position: relative;
}
.homeListagemDiv{
	width: 220px;
	padding-top: 30px;
	padding-left: 30px;
	height: 380px;
}
.homeListagemDiv>ul>li>img{width: 220px;height: 220px;}
.homeListagemDiv>ul>li>strong{color: #00aeef;font-size: 15px;font-family: "open_sansbold";
}
.homeListagemDiv>ul>li>span{color: #414042;font-size: 13px;font-family: "open_sansbold";
}
.homeListagemDiv>ul>li>p{
	color: #808285;
	font-size: 13px;
	font-family: "open_sanssemibold";
	margin-bottom: 3px;
}
.buscaFundoTotalPessoa{
	background-color: #f2f5f6;
	width: 1330px;
	height: 1095px;
	margin: auto;
}
.homeListagemLiBt{
	width: 32px;
	height: 32px;
	bottom: 0;
	right: 0;
	position: absolute;
	background-color: #e6e7e8;
	background-image: url('../imagens/flechaBaixoCinza.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}
/*.homeListagemLiBt:hover .buscaAvanHoverDiv{
	display: block;
}*/
.buscaAvanHoverDiv {
    background-color: #e6e7e8;
    height: 165px;
    left: -31px;
    position: absolute;
    top: 41px;
    width: 285px;
    z-index: 2;
   	display: none;
}
.buscaAvanHoverDiv ul{
	padding-left: 30px;
	padding-top: 30px;
}
.buscaAvanHoverDiv ul>li>span{
	font-family: 'open_sansbold';
	font-size: 13px;
	color: #414042;
}
.buscaAvanHoverDiv ul>li>p{
	font-family: 'open_sanssemibold';
	font-size: 13px;
	color: #808285;
	margin-bottom: 3px;
}
.buscaPaginacao{width: 144px;float: right;margin-right: 50px;}
.buscaPaginacao li{
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	font-family: 'open_sansbold';
	font-size: 18px;
	color: #58595b;
	background-color: white;
	float: left;
	margin-right: 4px;
	cursor: pointer;
}
.buscaPaginacaoFlecha{
	background-image: url("../imagens/paginacaoDir.png");
	background-repeat: no-repeat;
	background-position: center 10px;
	width:9px;
	height:...

JavaScript

$(".homeListagemLiBt").click(function () {
    $('.buscaAvanHoverDiv').slideDown();
});