JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="&quot;http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<body>
    <div id="wrapper">
        <div id="dialog">
            <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p>
        </div>
    </div>

CSS

#wrapper {
            position: absolute;
            background-color: red;
            width: 800px;
            height: 600px;
            overflow-y: scroll;
        }

JavaScript

var $dialog = $("#dialog");
        $dialog.dialog({
            appendTo: "#wrapper",
            height: 400,
            position: { my: "center", at: "center", of: "#wrapper" }
        });