JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chatroom">
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
</div>

CSS

#chatroom {
    position: relative;
}

#chatroom:before {
    content: "";
    
    /* Expand element */
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
    box-shadow: inset 0 0 8px rgba(0,0,0,.55);
    
    /* Disable click events */
    pointer-events: none;
}

.chatmessage:nth-child(2n) {
    background: #EEE;
}