JSFiddle - React, Tailwind, and code Playground

by chriswt

HTML

<div class="room-container">
    <div class="room-wrapper">
        <div class="info"></div>
    </div>
    <div class="chat"></div>
    <div class="send"></div>
</div>

CSS

.room-container {
    width:100px;
    position: absolute;
    top:20px;
    bottom:20px;
}
.room-wrapper {
    position: relative;
    height: 100%;
    margin: 0 auto -10px;
}
.info {
    background-color:green;
    width:100%;
    height:200px;
    z-index: -1;
}
.chat {
    background-color: red;
    position: absolute;
    top:200px;
    bottom:10px;
    left: 0;
    right: 0;
}
.send {
    background-color:black;
    width:100%;
    height:10px;
}