JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper" style="left: 10px top: 10px; x-index: 10;">
        <div class="title">Тестовое окно</div>
        <div class="content1">
            Это еще одно окно. Значение атрибута <tt>z-index</tt> этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживаемых такую возможность множество строк для демонстрации прокрутки 1
            <br>2
            <br>3
            <br>4
            <br>5
            <br>6
            <br>7
            <br>8
            <br>9
            <br>0
            <br> 1
            <br>2
            <br>3
            <br>4
            <br>5
            <br>6
            <br>7
            <br>8
            <br>9
            <br>0
            <br>
        </div>
    </div>

CSS

<style type="text/css" media="screen">
        div.wrapper {
            position: absolute;
            top: 0px;
            height: 500px;
            width: 600px;
            border: 4px outset grey;
        }
        
        div.title {
            position: absolute;
            top: 0px;
            height: 28px;
            width: 590px;
            border-bottom: groove 2px #aaa;
            padding: 5px 5px 5px 5px;
            line-height: 125%;
            background-color: green;

        }
        
        div.content1 {
            position: absolute;
            top: 40px;
            height: 455px;
            width: 590px;
            padding: 5px;
            overflow: auto;
            /* background-color: #ffffff; */
            background-color: red;
                opacity: 10%
        }