As you can see, in this post, we have a box for sending messages in individual PVs. You can use this box for the artbaz section by managing your website or to provide the possibility of conversation between website members. The appearance of this message box is glass and there are two colored balls under it.


HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<div class="chat-box">
    <div class="box-top_bar">
        <b>Double click in the message</b>
        <div class="user_image">
            <img src="http://devanswer.com/img/chinese-girl.jpg" alt="">
        </div>
    </div>
    <div class="chat-box_content">
        <div class="chat-messages">
            <div class="message-box">
                <img src="http://devanswer.com/img/chinese-girl.jpg" alt="">
                <div class="message_content" ondblclick="showOptions(this);">
                    <p>Hi Daniel! How are you doing?</p>
                </div>
                <div class="message-options">
                    <menu type="toolbar" onmouseenter="">
                        <li><button onclick="like(this);">❤️</button></li>
                        <li><button onclick="like(this);">🔥</button></li>
                        <li><button onclick="like(this);">👍</button></li>
                    </menu>
                </div>
            </div>
        </div>
        <div class="chat-form">
            <input type="text" placeholder="Type somenthing...">
            <button>
                <ion-icon name="paper-plane-outline"></ion-icon>
                <i class="fa-solid fa-paper-plane"></i>
              
            </button>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  outline: none;
  user-select: none;
}
*::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
ul, li {
  list-style: none;
}
body {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1A1C26;
  overflow: hidden;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #6A82FB, #FC5C7D);
  clip-path: circle(22% at 30% 20%);
  z-index: -1;
  pointer-events: none;
  animation: original 0.5s ease-out;
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #6A82FB, #FC5C7D);
  clip-path: circle(20% at 70% 90%);
  z-index: -1;
  pointer-events: none;
  animation: original 0.5s ease-out;
}

.chat-box {
  width: 500px;
  height: 90%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  background-color: #1A1C26;
  background-color: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  overflow: hidden;
}
@media only screen and (max-width: 800px) {
  .chat-box {
    width: 80%;
  }
}
@media only screen and (max-width: 800px) and (max-width: 400px) {
  .chat-box {
    width: 90%;
  }
}
.box-top_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 30px;
  padding-block: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.box-top_bar b {
  font-family: "Poppins", sans-serif;
  letter-spacing: 1xp;
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0.6;
}
.box-top_bar .user_image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.box-top_bar .user_image img {
  border-radius: inherit;
}
@media only screen and (max-width: 500px) {
  .box-top_bar {
    padding-inline: 20px;
    padding-block: 20px;
  }
  .box-top_bar .user_image {
    width: 45px;
    height: 45px;
  }
}
.chat-box_content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.chat-box_content .chat-messages {
  position: relative;
  padding-inline: 30px;
  padding-block: 30px;
}
@media only screen and (max-width: 500px) {
  .chat-box_content .chat-messages {
    padding-inline: 20px;
  }
}
.chat-box_content .chat-messages .message-box {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  gap: 15px;
  will-change: contents;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 500px) {
  .chat-box_content .chat-messages .message-box {
    gap: 10px;
  }
}
.chat-box_content .chat-messages .message-box img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.chat-box_content .chat-messages .message-box .message_content {
  padding-inline: 16px;
  padding-block: 8px;
  background: linear-gradient(45deg, #707DF7, #EF7196);
  border-radius: 50px 50px 50px 8px;
  z-index: 1;
}
.chat-box_content .chat-messages .message-box .message_content p {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: #FFFFFF;
}
@media only screen and (max-width: 500px) {
  .chat-box_content .chat-messages .message-box .message_content p {
    font-size: 13px;
  }
}
.chat-box_content .chat-messages .message-box .message-options {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(55px, 0);
  width: 26px;
  height: 0;
  padding-inline: 10px;
  padding-block: 4px;
  background-color: #262835;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transform-origin: top;
  will-change: contents;
  transition: all 0.3s ease, opacity 0.3s ease-out;
}
.chat-box_content .chat-messages .message-box .message-options menu {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.chat-box_content .chat-messages .message-box .message-options menu li {
  opacity: 0;
  will-change: contents;
  transition: all 0.2s ease-out;
}
.chat-box_content .chat-messages .message-box .message-options menu li button {
  width: 30px;
  height: 30px;
  line-height: 0;
  font-size: 16px;
  background-color: transparent;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  will-change: contents;
  transition: all 0.3s ease;
}
.chat-box_content .chat-messages .message-box .message-options menu li button:hover {
  transform: scale(1.1);
}
.chat-box_content .chat-messages .message-box.is-liked {
  border-radius: 6px;
}
.chat-box_content .chat-messages .message-box.is-liked .message-options {
  width: 26px;
  height: 26px;
  padding-inline: 0;
  padding-block: 0;
  transform: translate(60px, 18px);
  opacity: 1;
  z-index: 1;
}
.chat-box_content .chat-messages .message-box.is-liked .message-options menu li {
  display: none;
}
.chat-box_content .chat-messages .message-box.is-liked .message-options menu li.is-active {
  display: block;
  opacity: 1;
}
.chat-box_content .chat-messages .message-box.is-liked .message-options menu li button {
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.chat-box_content .chat-messages .message-box.is-liked.is-active .message-options {
  width: calc((30px * 3) + 16px);
  transition: all 0.4s ease, width 0s;
  padding-inline: 10px;
  padding-block: 4px;
}
.chat-box_content .chat-messages .message-box.is-liked.is-active .message-options menu li {
  display: block;
}
.chat-box_content .chat-messages .message-box.is-liked.is-active .message-options menu li button {
  width: 30px;
  height: 30px;
  font-size: 16px;
}
.chat-box_content .chat-messages .message-box.is-active {
  transform: scale(1.0999999) translateX(20px);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.chat-box_content .chat-messages .message-box.is-active .message-options {
  width: calc((30px * 3) + 16px);
  height: 41.8px;
  transform: translate(55px, 56px);
  opacity: 1;
}
.chat-box_content .chat-messages .message-box.is-active .message-options menu li {
  opacity: 1;
}
.chat-box_content .chat-form {
  display: flex;
  align-items: center;
  padding-inline: 20px;
  padding-block: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-box_content .chat-form button {
  width: 80px;
  height: 40px;
  line-height: 0;
  background-color: #707DF7;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
}
.chat-box_content .chat-form button ion-icon {
  font-size: 22px;
  color: #FFFFFF;
}
.chat-box_content .chat-form input {
  width: 100%;
  height: 100%;
  padding-inline: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color: transparent;
  border: 0;
}
.chat-box_content .chat-form input::placeholder {
  color: #FFFFFF;
  opacity: 0.3;
}
@media only screen and (max-width: 500px) {
  .chat-box_content .chat-form input {
    font-size: 12px;
  }
}
.message-box.is-active .message-options {
  animation: bg 0.6s ease;
}
@keyframes bg {
  0% {
    transform: translate(55px, 0px) scale(0.8);
    z-index: -1;
  }
  50% {
    transform: translate(55px, 56px) scale(1.07);
  }
  100% {
    transform: translate(55px, 56px) scale(1);
    z-index: 1;
  }
}
Javascript
const body = document.querySelector('body')
const message = document.querySelector('.message_content')
const options = document.querySelector('.message-options')
var visible = false
var liked = false
function showOptions (e) {
  const elm = e.parentNode
  if (visible === false) {
    elm.classList.add('is-active')
    visible = true
  }
}
body.onclick = (e) => {
  if (visible === true) {
    message.parentNode.classList.remove('is-active')
    visible = false
  }
}
function like (e) {
  const btn = e.parentNode
  const msg = document.querySelector('.message-box.is-active')
  
  if (visible === true) {
    if (liked === false) {
      btn.classList.add('is-active')
      msg.classList.add('is-liked')
      liked = true
    } else if (liked === true) {
      if (btn.className === 'is-active') {
        btn.classList.remove('is-active')
        msg.classList.remove('is-liked')
        liked = false
      } else {
        const btns = e.parentNode.parentNode.querySelector('li.is-active')
        btns.classList.remove('is-active')
        btn.classList.add('is-active')
        msg.classList.add('is-liked')
        liked = true
      }
    }
  } else {
    const msg = document.querySelector('.message-box')
    if (liked === true) {
      if (btn.className === 'is-active') {
        btn.classList.remove('is-active')
        msg.classList.remove('is-liked')
        liked = false
      }
    }
  }
}