JSFiddle - React, Tailwind, and code Playground

by fatelei

HTML

<div id="modal">
      这里有一个浮层。
    </div>
    <div class="overlay">
    </div>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint blanditiis perspiciatis nesciunt possimus minus molestiae culpa necessitatibus atque ut eveniet id magnam delectus reprehenderit! Ad atque aperiam rerum quas vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit esse nihil iusto ea natus aliquam enim ducimus deleniti vitae quibusdam aperiam voluptatibus necessitatibus nulla id non consectetur commodi! Laborum nam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem non quo laudantium doloremque necessitatibus deserunt sed vero officiis iste asperiores quasi quae nisi ab debitis dignissimos delectus cum repellat quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi a deserunt nostrum eos magni porro vel error dolore cupiditate iure sint fugiat rerum accusamus voluptates tenetur doloremque debitis ad reprehenderit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus aut dolorum officia eos commodi sit cumque nulla impedit perspiciatis ipsum odit expedita harum praesentium ducimus id labore deserunt quo repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit in voluptas excepturi perspiciatis iste vel laborum sunt nostrum quaerat laboriosam enim amet molestiae fugiat quos illum recusandae cum asperiores. Doloribus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis repudiandae voluptatum provident quaerat fugiat tenetur. Voluptates soluta unde saepe necessitatibus mollitia culpa itaque tenetur alias commodi omnis fugit corrupti!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita reiciendis facilis eius ea pariatur at dolore aperiam reprehenderit perferendis non ipsa quidem inventore unde architecto veniam similique amet commodi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati amet veritatis architecto...

CSS

html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      .overlay {
        width: 100%;
        height: 100%;
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.25);
      }

      #modal {
        max-width: 300px;
        background-color: white;
        border: 1px solid black;
        z-index: 11;
        position: fixed;
        top: 50%;
        left: 50%;
        text-align: center;
        padding: 50px 50px;
        margin-left: -100px;
        margin-top: -100px;
        box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
      }

      #content {
        margin: 300px;
      }