JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div class="selectedMensagem">
<input class="idMenssagem" hidden="hidden" value="5" />
</div>
<div class="emails mensagemEnviadaBorder">
<input class="idMenssagem" hidden="hidden" value="5" />
<div class="idEmails mensagemEnviada">RR</div>
<div class="origemEmails">Renan Rodrigues</div>
<div class="dataeHoraEmails">05/01/2016</div>
<div class="flagEmails">Enviado</div>
<div class="assuntoEmails">Aqui virá o assunto exemplo</div>
</div>
</div>
<div>
<div class="selectedMensagem">
<input class="idMenssagem" hidden="hidden" value="3" />
</div>
<div class="emails mensagemEnviadaBorder">
<input class="idMenssagem" hidden="hidden" value="3" />
<div class="idEmails mensagemEnviada">RR</div>
<div class="origemEmails">Felipe Ancestral</div>
<div class="dataeHoraEmails">05/01/2016</div>
<div class="flagEmails">Enviado</div>
<div class="assuntoEmails">Aqui virá o assunto exemplo</div>
</div>
</div>
<div>
<div class="selectedMensagem">
<input class="idMenssagem" hidden="hidden" value="2" />
</div>
<div class="emails mensagemEnviadaBorder">
<input class="idMenssagem" hidden="hidden" value="2" />
<div class="idEmails mensagemEnviada">RR</div>
<div class="origemEmails">Marcos Alberto</div>
<div class="dataeHoraEmails">05/01/2016</div>
<div class="flagEmails">Enviado</div>
<div class="assuntoEmails">Aqui virá o assunto exemplo</div>
</div>
</div>
CSS
.window{
display:none;
width:300px;
height:415px;
position:absolute;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
top: 50%;
left: 50%;
margin-top: -207px;
margin-left: -150px;
}
.window1{
display:none;
width:300px;
height:200px;
position:absolute;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
#lixeira, #lixeiraReuniao, #jaExistente, .NovoVisitante{
width: 130px;
height: 45px;
background: #EF473A;
color: white;
border-radius: 7px;
border-color: #D74040;
}
#delCompleto, #delCompletoReuniao{
width: 130px;
height: 45px;
background: #EF473A;
float: right;
color: white;
border-radius: 7px;
border-color: #D74040;
}
.mascara{
display:none;
position:absolute;
left:0;
opacity: 0.9;
top:0;
width: 100%;
height: 100%;
z-index:9000;
background-color: #000;
}
.ion{
font-size: 20px;
}
.fechar{
display:block; text-align:right;
}
#lbl_Rua_Reu,
#lbl_Bairro_Reu,
#lbl_Numero_Reu,
#lbl_Complemento_Reu,
#lbl_Cidade_Reu,
#lbl_Estado_Reu,
#lbl_CEP_Reu,
#lbl_Palavra_Reu,
#lbl_QuebraGelo_Reu,
#lbl_Louvor_Reu,
#lbl_Lanche_Reu,
#lbl_Descr_Reu{
width: 100%;
margin-top: 3px;
margin-bottom: 3px;
padding: 10px;
display: none;
}
#lbl_Rua_ReuEdit,
#lbl_Bairro_ReuEdit,
#lbl_Numero_ReuEdit,
#lbl_Complemento_ReuEdit,
#lbl_Cidade_ReuEdit,
#lbl_Estado_ReuEdit,
#lbl_CEP_ReuEdit,
#lbl_Palavra_ReuEdit,
#lbl_QuebraGelo_ReuEdit,
#lbl_Louvor_ReuEdit,
#lbl_Lanche_ReuEdit,
#lbl_Descr_ReuEdit{
width: 100%;
margin-top: 3px;
margin-bottom: 3px;
padding: 10px;
display: none;
}
[for="esconder"] {
display: none;
}
.bloqueiaTela{
display: none;
position: absolute;
z-index: 9999;
width: 100%;
height: 100%;
background: #DCDCDC;
}
#salvando{
...
JavaScript
$('.selectedMensagem').click(function () {
alert("entor aqui");
});