Messenger Retro (redes)

<div class="mm-mov chat"><b></b><div class="mm-mov-tt">Messenger (Nombre)</div><div class="mm-mov-txt">

<div class="mm-mov-bub"><uno><div>Está oscuro</div>
<div>No sé qué pasó</div>
<div>De pronto todo oscureció</div>
<div>Tampoco se escucha nada</div></uno>

<dos><div>¿Qué dices?</div>
<div>No te entiendo</div></dos>

<uno><div>No sé qué está pasando</div>
<div>Ni siquiera escucho mi propia voz</div></uno>

<dos><div>Tranquilo, debe haber una explicación</div></dos>

<uno><div>Ayudame</div>
<div>Por favor</div></uno>

</div><div class="mm-mov-tip">...</div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>


USUARIO 01:
<div class="mm-mov chat"><b></b><div class="mm-mov-tt">Messenger (Nombre)</div><div class="mm-mov-txt">

<div class="mm-mov-bub"><uno><div>Está oscuro</div>
<div>No sé qué pasó</div>
<div>De pronto todo oscureció</div>
<div>Tampoco se escucha nada</div></uno>

</div><div class="mm-mov-tip">...</div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>


USUARIO 02:
<div class="mm-mov chat"><b></b><div class="mm-mov-tt">Messenger (Nombre)</div><div class="mm-mov-txt">

<div class="mm-mov-bub"><dos><div>¿Qué dices?</div>
<div>No te entiendo</div></dos>

</div><div class="mm-mov-tip">...</div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>


USUARIO 03:
<div class="mm-mov chat"><b></b><div class="mm-mov-tt">Messenger (Nombre)</div><div class="mm-mov-txt">

<div class="mm-mov-bub"><tres><div>El tendido eléctrico está bien</div>
<div>Solo tomé tus sentidos</div></tres>

</div><div class="mm-mov-tip">...</div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>


CSS:
<style>.mm-mov { --mov-a: #d79b9a; --mov-b: #abb7a9; --mov-c: #a0b5b9; --mov-bor: #a3a7b1; --mov-txt: #45433f; --mov-fon-1: #eee6e3; --mov-fon-2: #d9c7c0; } .mm-mov br { display: none; } .mm-mov { background: var(--mov-fon-2); border: 1px solid var(--mov-bor); border-radius: 10px; width: 330px; margin: auto; position: relative; font: 10px calibri; color: var(--mov-txt); letter-spacing: 1px; overflow: hidden; } .mm-mov-tt { text-transform: uppercase; font-weight: bold; margin: 5px 5px -1px; border: 1px solid var(--mov-bor); display: inline-block; background: var(--mov-fon-1); padding: 2px 5px; border-radius: 6px 6px 0 0; border-bottom: 0; position: relative; } .mm-mov-txt { background: var(--mov-fon-1); border-top: 1px solid var(--mov-bor); padding: 15px; } .mm-mov::before, .mm-mov::after, .mm-mov > b { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--mov-c); border: 1px solid var(--mov-fon-1); content:""; } .mm-mov::before { background: var(--mov-a); right: 33px; } .mm-mov::after { background: var(--mov-b); right: 19px; } .mm-mov-bub { border: 1px solid var(--mov-bor); border-radius: 5px; box-shadow: inset 0 0 70px -10px var(--mov-fon-2); padding: 10px; overflow: auto; max-height: 400px; font-size: 12px; text-align: left; } .mm-mov-bub > * { display: flex; flex-direction: column; align-items: flex-start; } .mm-mov-bub tres, .mm-mov-bub dos { align-items: flex-end; } .mm-mov-bub div { border: 1px solid var(--mov-bor); padding: 2px 5px; max-width: 80%; border-radius: 5px; } .mm-mov-bub div ~ div { margin-top: 5px; } .mm-mov-bub > * ~ * { margin-top: 10px; } .mm-mov-bub uno div { background: var(--mov-a); } .mm-mov-bub uno div:last-of-type { border-radius: 5px 5px 5px 0; } .mm-mov-bub dos div { background: var(--mov-b); } .mm-mov-bub tres div:last-of-type, .mm-mov-bub dos div:last-of-type { border-radius: 5px 5px 0 5px; } .mm-mov-bub tres div { background: var(--mov-c); } .mm-mov-tip { border: 1px solid var(--mov-bor); margin-top: 5px; border-radius: 5px; padding: 5px 10px; box-shadow: inset 0 0 30px -5px var(--mov-fon-2); font-weight: bold; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #444; } .miMM:hover { letter-spacing: 3px; }</style>