JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="notebook" id="notebook1">
 <ul class="tabs">
  <li><a href="#page1-1">Первая</a></li>
  <li><a href="#page1-2">Вторая</a></li>  
 </ul>
 <ul class="pages">
  <li class="page" id="page1-1">1</li>
  <li class="page" id="page1-2">2</li>  
 </ul>
</div>

CSS

.notebook,
.notebook .tabs,
.notebook .pages,
.notebook .page {
 margin: 0;
 padding: 0;
}
.notebook .tabs, .notebook .pages {
 list-style: none;
 overflow: hidden;
}
.notebook .tabs li {
 float: left;
  border-right: 1px solid gray;
 border-top: 1px solid gray;  
 padding: 0 10px;
 height: 30px;
}
.notebook .pages {
  border: 1px solid gray;
    clear: both;
}
.notebook .tabs {
 border-left: 1px solid gray;
 font-family: Georgia;
 font-size: 12px;
 line-height: 30px;
 height: 30px;
}
.notebook .tabs a {
 text-decoration: none;
}
#notebook1 .pages, #notebook1 .page {
 width: 500px;
 height: 200px;
}
#notebook1 .pages {
 text-align: center;
 line-height: 200px;
 font-size: 150px;
}
#notebook2 .pages, #notebook2 .page {
 width: 320px;
 height: 320px;
}
#page2-1 img, #page2-2 img {
 padding: 5px;
}
.notebook .page .page-top-border
{
 margin: 0px;
 padding: 0px;
 border: none;
}
.notebook .page .page-top-border *
{
 height: 2px;
 font-size: 1px;
 line-height: 1px;
 border-top: 1px solid gray;
 float: left;
 margin: 0px;
 padding: 0px;
}
.notebook .page-top-border .page-active
{
 border-top: 1px solid #eee;
}