JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script src="https://kit.fontawesome.com/abe3bddbe4.js" crossorigin="anonymous"></script>
</head>
<div id="message_chat">

        <div class="top-bar">
            <div class="top-bar_time">
                <p class="time">10:34 <img src="img/top-bar/top-bar_time/location-arrow.svg" alt=""></p>
            </div>
            <div class="top-bar_indicators">
                <div class="item"><img src="img/top-bar/top-bar_indicators/net-arrow.svg" alt=""></div>
                <div class="item"><img src="img/top-bar/top-bar_indicators/wifi-arrow.svg" alt=""></div>
                <div class="item"><img src="img/top-bar/top-bar_indicators/battery-arrow.svg" alt=""></div>
            </div>
        </div>


        <div class="message_content-bar">

            <div class="message-wrapper">
                <a class="message-to-you">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you">fdhgfhh</a>
                <a class="message-to-your">fdfddghghfgdhhp</a>
                <a class="message-to-you">gfhfghfgfgfgfgfgfgfgfgfgfgfgfgfgfgfggfhfghfgfgfgfgfgfgfgfgfgfgfgfgfgfgfg</a>
                <a class="message-to-your">ogfjgfhdfgfdgfghfghgfhgjgfhgfhhf</a>
                <a class="message-to-your">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you-img">ФОТО</a>
                <a class="message-to-you">gfgfhhgfh</a> 
                <a class="message-to-your-img">ФОТО</a>
                <a class="message-to-your">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you-img">ФОТО</a>
                <a class="message-to-you">gfgfhhgfh</a> 
                <a class="message-to-your-img">ФОТО</a>
            </div>

        </div>

        <div class="input_wrapper">
            <div class="input-line">
                <a href="#" class="input-line_camera"><i class="fas fa-camera"></i></a>
                <div class="input-line_chat">
                    <input type="search" class="chat" placeholder="iMessage"...

CSS

*, *::after, *::before{
    box-sizing: border-box;
}

::-webkit-scrollbar{
    width: 0;
}

body{
    font-family: sans-serif;
    color: black;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;

}

a{
    text-decoration: none;
}
.top-bar{
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    transition: .3s;
    cursor: pointer;
    user-select: none;
}

.top-bar:hover{
    background-color: rgba(255, 255, 255, 0.42);
    transition: .5s;
}

.top-bar_time p.time{
    font-size: 18px;
    color: black;
}

.top-bar_indicators{
    display: flex;
    justify-content: space-between;
}

.top-bar_indicators .item{
    padding-right: 5px;
}
#message_chat{
    width: 414px;
    height: 896px;
    background-color: #fff;
    right: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
    user-select: none;
}

#message_chat .top-bar:hover{
    background-color: rgba(160, 158, 158, 0.185);
    transition: .5s;
}

.input-line{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
}

.input-line_chat{
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 10px;
    height: 40px;
    border: 2px solid #C2C2C2;
    border-radius: 20px;
}

.input-line_chat input.chat{
    border: none;
    outline: none;
    padding: 0 20px;
    border-radius: 15px;
    width: 84%;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
}

a.input-line_camera{
    color: rgba(0, 0, 0, 0.4);
    font-size: 38px;
}

a.input-line_camera:hover{
    color: rgba(97, 97, 97, 0.4);
    transition: .3s;   
}

a.chat-voice{
    background-color: rgba(196, 196, 196, 0.46);
}

a.chat-voice:hover{
    background-color: rgba(196, 196, 196);
}

.input-line_chat a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
   ...

JavaScript

const button = document.querySelectorAll('[data-key]')
const shift = document.querySelector('[data-key="shift"]')
const inputWrapper = document.querySelector('.input_wrapper')
const messageContentBar = document.querySelector('.message_content-bar')




const messageContent = document.querySelector('.message_content-bar')
messageContent.scrollTo(0, messageContent.scrollHeight);

let isShift = true


shift.addEventListener('click', () => {
	if (isShift) {
  	button.forEach(el => el.style.textTransform = 'uppercase')
    isShift = false
  } else {
    	button.forEach(el => el.style.textTransform = 'lowercase')
    	isShift = true
  }

})

function openApp(pageName) {
    document.getElementById(pageName).style.display = "block";
    messageContentBar.style.height =`calc(88% - ${inputWrapper.offsetHeight}px)`
    messageContent.scrollTo(0, messageContent.scrollHeight);
    $(document).keydown(function(e) {
        if (e.keyCode == 27) {
            document.getElementById(pageName).style.display = "none";
        }
    });
}