JSFiddle - React, Tailwind, and code Playground

by Yauheni Pakala

HTML

<a href="#open-modal">Open modal</a>
  
<div class="modal" id="open-modal">
    <div class="modal-container">
        <p>text text text</p>
        <a href="#modal-close">Close</a>
    </div>
</div>
  
  
  
  
  <p><br></p>
  
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta facere quasi deserunt laborum consequatur, quisquam, optio temporibus laudantium et harum exercitationem. Alias ratione facilis eum temporibus sequi ut id optio odio, provident quaerat aliquam similique ducimus, repellendus rem, ullam nostrum expedita consectetur animi ad at harum commodi illo eos voluptatum. Impedit, doloribus, nesciunt! Assumenda voluptatem voluptas impedit autem. Recusandae itaque eum cum sed esse aliquam repudiandae. Ipsum amet, a voluptatibus sequi minus in libero. Sint ratione placeat nesciunt. Incidunt tenetur quod, nesciunt suscipit quas laudantium, distinctio maiores quaerat debitis omnis neque placeat assumenda voluptate maxime eos magnam perspiciatis blanditiis?</span>
    <span>Eum cum neque perferendis adipisci dolor necessitatibus reiciendis corrupti ullam quia nesciunt, placeat tenetur natus dolore, obcaecati officia animi, non at dolorem error! Debitis asperiores exercitationem eveniet magni dolores cumque veniam blanditiis facere aspernatur impedit, fugit itaque deleniti ducimus ipsa pariatur tempora, libero quia ratione similique. Sint nobis, quas modi! Animi blanditiis aut illo eius esse saepe rerum aspernatur iste id laudantium deleniti quos architecto enim in, ipsum eaque aliquam. Sit beatae cum animi, ipsa distinctio pariatur aliquid eius optio placeat perspiciatis sapiente dolores! Delectus minus aliquid temporibus sunt, nemo mollitia aspernatur repellat dolores accusantium iusto rerum, ipsum, sed voluptate!</span>
    <span>Assumenda voluptatum eveniet ea eligendi quas enim, ducimus, eaque quia temporibus rerum quasi fugiat quibusdam autem est vel, ipsam facilis vero magni ipsa exercitationem amet sed,...

CSS

/* Step 1 */

p {
    margin-top: 0px;
}


.modal-container {
    position: fixed;
    background-color: #fff;
    border: 1px solid #000;
    width: 70%;
    max-width: 400px;
    left: 50%;
    padding: 20px;
    border-radius: 5px;
    
    
    -webkit-transform: translate(-50%, -200%);
    -ms-transform: translate(-50%, -200%);
    transform: translate(-50%, -200%);
    
    
    /* Step 3 */
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
}

.modal:before {
    content: "";
    position: fixed;
    display: none;
    background-color: rgba(0,0,0,.8);
    top: 0;
    left: 0;
    height: 100%;
    width: 100% 
}

/* Step 2 */

.modal:target:before {
    display: block;
}

.modal:target .modal-container {
    top: 20%;
    
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}