JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="pushblock">
 
<div>
    .......
</div>
 
<div class="modalpush" id="modalDialog">
    <form method="post" action="newsPage">
 
        <input type= "text" name="title">
 
        <textarea cols="45" maxlength="100" onkeyup="countf()" id="text" name="content"></textarea>
        <p style="font-size: 20px" id="count"></p>
 
        <input type="submit" value="Сохранить" name="modalForm1">
    </form>
    <input type="button" value="Закрыть" onclick="modal_close()">
 
</div>
 
</div>
 
 
 
<div class="newsblock">
 
    <div>
        .......
    </div>
 
 
    <div class="modalnews" id="newsModalDialog">
        <form method="post" action="newsPage">
 
             <textarea cols="45" maxlength="100" onkeyup="countf2()"
                       name="title_news" value ="title_news"></textarea>
 
            <textarea cols="45" maxlength="100" onkeyup="countf2()" id="news_text"
                      name="content_news" value ="content_news"></textarea>
            <p style="font-size: 20px" id="news_count"></p>
 
            <input type="submit" value="Сохранить" name="modalForm2">
        </form>
        <input type="button" value="Закрыть" onclick="modal_close()">
 
    </div>
 
</div>

CSS

.pushblock {
	position: relative;
	background-color: #fa9ca5;
	width: 40%;
	float: left;
	height: 100%;
	z-index: 2;
}

.newsblock {
	position: relative;
	background-color: #fa660a;
	width: 60%;
	float: right;
	top: 0%;
	height: 100%;
	z-index: 3;
}

.modalpush {
	position: absolute;
	background-color: #806b71;
	font-size: 30%;
	position: fixed;
	height: 400px;
	width: 600px;
	top: 20%;
	bottom: 30%;
	left: 30%;
	right: 30%;
	border-style: solid;
	border: black;
	border-width: 5px;
	display: none;
	z-index: 4;
}

.modalnews {
	position: absolute;
	background-color: #807e6a;
	font-size: 30%;
	position: fixed;
	height: 400px;
	width: 600px;
	top: 20%;
	bottom: 30%;
	left: 30%;
	right: 30%;
	border-style: solid;
	border: black;
	border-width: 5px;
	display: none;
	z-index: 4;
}