JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="phone">
      <div class="screen">
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
      </div>
      <div class="nav">
        <p class="text-center">Back</p>
        <p class="text-center">Home</p>
        <p class="text-center">Menu</p>
      </div>
    </div>
  </body>

CSS

html {
    height: 100%;
}

.text-center {
    text-align: center;
}

body {
    height: 99%;
    margin: 0;
    background-color: grey;
}

div {
    padding: 2%;
}

.phone {
    height: 100%;
    width: 40%;
    overflow: hidden;
    padding: 0;
    border-radius: 3%;
    border: 2px solid red;
}

.phone .nav p {
    float: left;
    width: 33.3%;
    margin: 0;
}

.phone .screen {
    height: 50%;
    overflow-y: auto;
    background-color: #c3cee0;
}

.phone .screen p {
    max-width: 60%;
    display: table;
    border-radius: 25px;
    padding: 3%;
    background-color: #134ead;
}

.phone .nav {
    background-color: black;
    overflow: hidden;
    color: white;
}