JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">

    .modal-body {
  max-height: calc(20vh - 220px);
  min-height: 50px;
  overflow-y: auto;
  background-color: white;
  overflow-x: hidden;
}

@media only screen and (max-width: 720px) {
.modal-body {
  max-height: calc(60vh - 230px);
  min-height: 150px;
  overflow-y: auto;
  background-color: white;
}
}
  </style>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc massa erat, dignissim sed nunc at, blandit mollis ipsum. Curabitur nibh eros, gravida sit amet lectus quis, tincidunt viverra odio. Praesent ultrices mauris sit amet posuere volutpat. Suspendisse rhoncus velit non quam fermentum molestie. Suspendisse neque magna, posuere vitae mauris sit amet, cursus luctus mi. Vestibulum condimentum consectetur ex. Nam non sagittis dolor. Praesent ac rhoncus sapien. Pellentesque vehicula congue ipsum, sed fermentum sem facilisis in. Duis accumsan odio id leo...