JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div class="modal modal-cute">
  <div class="title">
    emokitten.com
    <span class="title-btn">
      <span class="btn1"></span> 
      <span class="btn2"></span> 
      <span class="btn3"></span>
    </span>
  </div>

  <div class="body">
    
    <div class="msg-container">
      
    </div>
    
  </div>


</div>

SCSS

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  background: #8080fb;
}

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Press+Start+2P&display=swap');

$text_color: #333;
$icon_color: #333;
$border_color: #111;
$btn_color: pink;
$img_size: 120px;

.modal-cute {
  display: inline-block;
  margin: 32px 0;
  width: 400px;
  height: 600px;
  border: solid 2px #111;
  border-right-color: rgb(17, 17, 17);
  border-right-style: solid;
  border-right-width: 4px;
  border-bottom-color: rgb(17, 17, 17);
  border-bottom-style: solid;
  border-bottom-width: 4px;
  border-right: solid 4px #111;
  border-bottom: solid 4px #111;
  border-radius: 2px;
  overflow: hidden;
  background: #fde8ef;
  font-family: 'Press Start 2P', cursive;

  .body {
    //padding: 16px 16px;
    //font-size: 10px;
    height: calc(100% - 40px);
  }

  .title {
    position: relative;
    padding: 12px 8px;
    border-bottom: solid 2px #111;
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.2em;
    background-color: #fec5e9;


    span.title-btn {
      position: absolute;
      display: block;
      top: 50%;
      right: 8px;
      transform: translatey(-50%);
      letter-spacing: -0.6em;

      span {
        display: inline-block;
        width: 18px;
        height: 18px;
        content: '';
        border: 2px solid $icon_color;
        border-radius: 2px;
        background-color: #fae6ed;

        &:before,
        &:after {
          content: '';
          border-top: 2px solid $icon_color;
          background-color: #ddd;
        }
      }

      span.btn1 {
        &:before {
          position: absolute;
          top: 11px;
          left: 4px;
          width: 10px;
        }
      }

      span.btn2 {
        &:before {
          position: absolute;
          top: 4px;
          left: 50%;
          transform: translatex(-50%);
          width: 6px;
          height: 4px;
          border: 2px solid $icon_color;
 ...

JavaScript

const chatContainer = document.body.querySelector('.msg-container');

function scrollToBottom(element){
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

const outputChat = function(html, user=false) {
	
  //Delete a chat if there's more than 5 chats
  if (chatContainer.children.length > 15) {
  	chatContainer.children[0].remove();
  }
  
  const div = document.createElement('div');
  div.className = 'chat-bubble-container ' + (user ? 'user' : 'bot');
  div.innerHTML = `<div class="chat-bubble ${user ? 'user' : 'bot'}">${html}</div>`;
  
  chatContainer.append(div);
  
  scrollToBottom(chatContainer);

};

setInterval(() => {
	
  outputChat('hello there!', Math.random() > 0.5);
  
}, 1000);