[html]
<style>
.sns {width: 300px; height: 390px; border-radius: 30px 30px 30px 30px; position: relative; background-image: url("https://i.imgur.com/5qW6sxP.png")!important;"}
.nameinfo { width: 290px; height: 30px; background: #ffffff; border-bottom: 1px solid #bbc8dd; font-family: 'Tilda Sans'; text-transform: uppercase; text-align: center; padding: 5px; border-radius: 30px 30px 0px 0px;}
.nameinfo dis { width: 290px; text-transform: lowercase;}
.chat {height: 330px; width: 300px; overflow: auto; }
.leftchat {width: 260px; height: auto; text-align: left; padding: 5px; }
.leftchato {position: relative; max-width: 300px; background-color: #ffffff; padding: 10px; margin: 6px 0 6px 0px; text-align: left; border-radius: 10px 10px 10px 0px; display: inline-block; font-size: 9px;}
.leftchato otvet { background-color: #e4ecf8; padding: 5px; margin-bottom: 5px; max-width: 240px; text-align: left; display: inline-block; border-radius: 0px 10px 10px 0px; border-left: 3px solid #8191aa; font-size: 9px; opacity: .7;}
.snstime {opacity: .6; font-size:7px;text-align: left;}
.rightchat {width: 260px; height: auto; text-align: right; padding: 5px; }
.rightchato {position: relative; max-width: 300px; background-color: #ffffff; padding: 10px; margin: 6px 0 6px 0px; text-align: right; border-radius: 10px 10px 0px 10px; display: inline-block; font-size: 9px;}
.rightchato otvet { background-color: #e4ecf8; padding: 5px; margin-bottom: 5px; max-width: 240px; text-align: left; display: inline-block; border-radius: 10px 0px 0px 10px; border-right: 3px solid #8191aa; font-size: 9px; opacity: .7;}
.snstimet {opacity: .6; font-size:7px; text-align: right;}
.fotothree {width:130px; height: 130px; padding: 5px; border-radius: 50px 50px 0px 50px; }
.fototwog {width:100px; height:100px;border-radius:50%!important; }
.fotoone {width:130px; height: 130px; padding: 5px; border-radius: 50px 50px 50px 0px; }
.fototwo {width:100px; height:100px;border-radius:50%!important; }
</style>
<center>
<!-- СООБЩЕНИЯ ТЕЛО НАЧАЛО -->
<div class="sns">
<!-- ИМЯ НАЧАЛО -->
<div class="nameinfo"><b>
джей
</b><br> <div style="opacity: .8;">
<dis> был онлайн .... минут назад</dis></div>
</div><!-- ИМЯ КОНЕЦ -->
<div class="chat">
<!-- СООБЩЕНИЯ СЛЕВА-->
<div class="leftchat">
<div class="leftchato"><otvet>ответить на сообщение </otvet><br>ваогрнолнеглнглнгрнр
</div>
<div class="snstime">00:00</div>
<div class="leftchato">ваогрнолнеглнгл нгрнрваогрнолнеглнгл нгрнрва огрнолнеглн глнгрнрвао грнолнегл нглнгрнр</div>
<div class="snstime">00:00</div>
<div class="leftchato">ваогрнолнеглнглнгрнр</div>
<div class="snstime">00:00</div>
<!-- ФОТО НАЧАЛО -->
<img src='https://i.pinimg.com/564x/9a/45/a1/9a45a1e225ad94d33042e4768196126c.jpg' class="fotoone">
<div class="snstime">00:00</div>
<!-- ФОТО КОНЕЦ -->
<!-- КРУЖОЧЕК НАЧАЛО ДЛЯ ПЕРВОГО -->
<img src='https://c.tenor.com/o1illtX4LJMAAAAC/ten-ten-lee.gif' class="fototwo">
<div class="snstime">00:00</div>
<!-- КРУЖОЧЕК КОНЕЦ-->
</div>
<!-- СООБЩЕНИЯ СЛЕВА-->
<!-- СООБЩЕНИЯ СПРАВА-->
<div class="rightchat">
<div class="rightchato"><otvet>ответить на сообщение </otvet><br>ваогрнолнеглнглнгрнр
</div>
<div class="snstimet">00:00</div>
<div class="rightchato">ваогрнолнеглнглнгрнр</div>
<div class="snstimet">00:00</div>
<div class="rightchato">ваогрнолнеглнглнгрнр</div>
<div class="snstimet">00:00</div>
<!-- ФОТО НАЧАЛО -->
<img src='https://i.pinimg.com/564x/9a/45/a1/9a45a1e225ad94d33042e4768196126c.jpg' class="fotothree">
<div class="snstimet">00:00</div>
<!-- ФОТО КОНЕЦ -->
<!-- КРУЖОЧЕК НАЧАЛО ДЛЯ ВТОРОГО-->
<img src='https://c.tenor.com/o1illtX4LJMAAAAC/ten-ten-lee.gif' class="fototwog">
<div class="snstimet">00:00</div>
<!-- КРУЖОЧЕК КОНЕЦ-->
<!-- СООБЩЕНИЯ СПРАВА-->
</div>
<!-- СООБЩЕНИЯ ТЕЛО КОНЕЦ -->
</div>
</div>
</center>
[/html]