JSFiddle - React, Tailwind, and code Playground

by l2banners

HTML

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="grid-wrp">
      <div class="grid">
        <div class="grid__header">
          <div class="grid__row">
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
          </div>
        </div>
        <div class="grid__body">
          <div class="grid__row">
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
          </div>
          <div class="grid__row">
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
          </div>
          <div class="grid__row">
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
            <div class="grid__cell"> 1111</div>
            <div class="grid__cell"> 222</div>
          </div>
          <div class="grid__row">
            <div...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  min-height: 100vh;
 
}

.header {
  border: 1px solid black;
  height: 40px;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  margin:100px;
}

.footer {
  border: 1px solid black;
  height: 40px;
}

.grid-wrp {
      overflow: auto;
      border: 1px solid red;
      flex-grow: 1;
}

.grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  
}

.grid__header {
  min-height: 40px;
  display: flex;
}

.grid__header > .grid__row {
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #36304a;
  border: 1px solid black;
}

.grid__row {
  display: flex;
}

.grid__cell {
  border: 1px solid black;
  flex: 1;
  
  min-width: 100px;
}



.pagination {
  border: 1px solid black;
  margin-top: auto;
}