JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="A">
<div>
 ICON
</div>
<div>
TITLE
</div>
<div class="C">
  <div class="C">
    <h4>
    titulo
    </h4>
    <p class="D">
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf adf asdf aasdf a
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    TExto asdf asdf asdf
    </p>
  </div>
</div>
<div>
Boton
</div>
</div>

CSS

html,body{
  with:100%;
  height:100%;
  margin:0px;
  padding:0px;
}
.A {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 70%;
    width: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.25);
    border-radius: 1em 5em;
    overflow: hidden;
}
.C {display:flex;
  flex-direction: column;
  flex-grow:1;
  overflow: hidden;
  }
.D{
  overflow-y: auto;
  overflow-x: auto;
}