JSFiddle - React, Tailwind, and code Playground
by Mustafa Oeztuerk
HTML
<div class="msdv">
<a class="account"><span></span></a>
<div class="bubble">
<div class="xstr"><div class="gks">lorem</div><div class="yms">lorem</div></div>
<div class="xstrs">
<ul class="root">
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">lorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremlorem.</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
...
CSS
.msdv {
float:left;
width:30px;
height:40px;
background-color:#2a3542;
color:#fff;
text-align:center;
line-height:40px;
margin-left:130px;
}
.bubble
{
float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top:50px;
margin-left:-87px;
display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 134px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;
}
.msdv ul li a {
width:325px;
height:50px;
color:#000;
display:block;
font-family:arial;
font-weight:bold;
padding:3px 2px;
cursor:pointer;
text-decoration:none;
border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
background:#edeff4;
color:#000;
text-decoration:none;
}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;
}
.xstr {
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border: 0px solid #d8dbdf;
...
JavaScript
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".msdv").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".msdv").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.msdv').hasClass('open'))
{
$('.msdv').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});