Generated by SassMeister.com.

input.scss

.chat{
    width: 300px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid;
    background: white;

}

.header{
    display:flex;
    flex-direction:row;
    justify-content:center;
    border-bottom: 1px solid;
}
.header__title{
    font-weight:bold;
}
.header__close{
    font-weight: bold;
    position: relative;
    left: 125px;
}
.body{
  height: 300px;
}
.message_userName{
    color: blue;
}
.message_userName:after{
    content: ":";
}

.form{ 
    display: flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}
.input-text{
 width: 200px;   
}

markup.html

<div class="chat animate__animated animate__bounce">
    <div class="header">
            <span class="header__title">Chat</span>
            <span class="header__close">×</span>
    </div>
    <div class="body">
    <div class="message">
        <span class="message_userName">YoFluffyyy</span>
        <span class="message_content">hey shahz I hope you are having a</span>
    </div>
        <div class="message">
        <span class="message_userName">YoFluffyyy</span>
        <span class="message_content">hey shahz I hope you are having a</span>
    </div>
        <div class="message">
        <span class="message_userName">YoFluffyyy</span>
        <span class="message_content">hey shahz I hope you are having a</span>
    </div>
    </div>
    <div class="form">
        <input type="text" placeholder="default" class="input-text" />
        <input type="button" value="send" class="send" />

    </div>
</div>

output.css

.chat {
  width: 300px;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid;
  background: white;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid;
}

.header__title {
  font-weight: bold;
}

.header__close {
  font-weight: bold;
  position: relative;
  left: 125px;
}

.body {
  height: 300px;
}

.message_userName {
  color: blue;
}

.message_userName:after {
  content: ":";
}

.form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.input-text {
  width: 200px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}