JSFiddle - React, Tailwind, and code Playground

by Kleber Mota

HTML

<div class="textarea-with-nav" id="outerWrap">
      <div class="navbar">
        <ul>
          <li><a href="#">teste1</a></li>
          <li><a href="#">teste2</a></li>
          <li><a href="#">teste3</a></li>
        </ul>
      </div>
      <textarea id="layer1"></textarea>
      <textarea id="layer2"></textarea>
    </div>

CSS

html, body {
	margin: 0;
	height: 100%;
}
.primary-content {
	padding-top: 55px;
}
.navbar {
	grid-area: header;
	overflow: hidden;
	background-color: #333;
	width: 100%;
        z-index: 1;
}
.navbar.site-nav {
	position: fixed;
	top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
	color: white;
	padding: 8px 16px;
	text-decoration: none;
}
.navbar ul li a:hover {
	background-color: #555;
	color: white;
	height: 100%;
}
.textarea-with-nav {
        transform: translate(50%);
	width: 400px;
	height: 300px;
	position: realtive;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.textarea-with-nav > .navbar {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.textarea-with-nav > textarea {
	border: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 396px !important;
	height: 246px !important;
	resize: none;
}
.textarea-with-nav > textarea:focus { outline: none; }

#outerWrap {
  position: relative;
  z-index: 0;
  height: 480px;
  width: 640px;
}

#layer1 {
  position: absolute;
  z-index: 1;
  height: 100%;
}

#layer2 {
  position: absolute;
  z-index: 2;
  height: 100%;
}