JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<main>
  <section class="main1">
    <h4>Header</h4>
    <h4>Header</h4>
  </section>

  <section class="content">
    <section class="section1">
      
      <section class="sub1">
        <h2>CreateTask</h2>
        <input type="text">
        <textarea></textarea>
        <select>
          <option>sadsada</option>
        </select>
      </section>

      <section class="sub2">
        <h2>Add new member</h2>
        <input type="text">
        <button>Add</button>
      </section>
      
      <section class="sub3">
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
        <div>name sadwa</div>
      </section>
    </section>

    <section class="section2">
      <h4>Stuffs</h4>
    </section>
  </section>
</main>

CSS

html, body, main {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

main {
    display: grid;
    grid-template-rows: auto 1fr;
}

.content {
    display: grid;
    grid-template-columns: 20em 1fr;
    grid-gap: 10px;
    overflow: hidden;
}

.section1 {
    display: grid;
    grid-template-rows: repeat(2, auto) 1fr;
    overflow-y: auto;
}

.sub3 {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 10px;
    overflow: scroll;
}

.sub3 > *{
  height: 2em;
  margin: 0.5em;
}