JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="sticky">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="chat">
<div class="data">05/03/2019</div>
<div class="box recebido">Olá</div>
<div class="box enviado">Oi, tudo bem ?</div>
<div class="data">06/03/2019</div>
<div class="box recebido">Tudo bem!</div>
<div class="box recebido">e voce ?</div>
<div class="box enviado">Tudo bem tambem</div>
<div class="box recebido">preciso de ajuda</div>
<div class="box recebido">Voce pode me ajudar</div>
<div class="data">07/03/2019</div>
<div class="box enviado">Talvez sim</div>
<div class="box enviado">O que voce precisa</div>
<div class="box recebido">Como posso utilizar o position:sticky ?</div>
<div class="box enviado">Deixe-me ver</div>
<div class="box enviado">Acho que posso te ajudar</div>
<div class="box recebido">Certo</div>
</div>
</body>
<style>
* {
margin: 0px;
padding: 0px;
}
.chat {
overflow: auto;
border: solid 1px black;
position: fixed;
left: 50%;
top: 50%;
background-color: #e5ddd5;
z-index: 100;
height: 500px;
margin-top: -200px;
width: 500px;
margin-left: -300px;
}
.box {
width: 300px;
margin: 30px auto;
padding: 20px;
text-align: center;
font-weight: 400;
color: black;
font-family: arial;
position: relative;
border-radius: 20px;
}
.box.enviado {
background: #dcf8c6;
}
.box.recebido {
background: white;
}
.recebido:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
...