JSFiddle - React, Tailwind, and code Playground

by vikaskbh

HTML

<body>
   
    <div id="overlay4">
        <div>
            <h2>Some awesome title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid perspiciatis maxime sint deleniti. Modi odio odit accusamus quam debitis amet obcaecati unde dolores dignissimos doloribus. Consequatur mollitia repellendus ut!</p>
        </div>
    </div>
    
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quod reprehenderit rem quia ea rerum adipisci tempore beatae quo consequatur vero aliquid unde accusantium facere illo fugiat non nostrum ducimus.</p>
    
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quod reprehenderit rem quia ea rerum adipisci tempore beatae quo consequatur vero aliquid unde accusantium facere illo fugiat non nostrum ducimus.</p>
    
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quod reprehenderit rem quia ea rerum adipisci tempore beatae quo consequatur vero aliquid unde accusantium facere illo fugiat non nostrum ducimus.</p>
    
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quod reprehenderit rem quia ea rerum adipisci tempore beatae quo consequatur vero aliquid unde accusantium facere illo fugiat non nostrum ducimus.</p>
    
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quod reprehenderit rem quia ea rerum adipisci tempore beatae quo consequatur vero aliquid unde accusantium facere illo fugiat non nostrum ducimus.</p>
    
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quod reprehenderit rem quia ea rerum adipisci tempore beatae quo consequatur vero aliquid unde accusantium facere illo fugiat non nostrum ducimus.</p>
    <div>
        <input type="button" value="Show Model" />
    </div>
</body>

CSS

h2,p{padding:5px}

#overlay4{
    position:relative;
    top:0;
    left:0;
    width: 100%;
}

#overlay4 div{
            position: absolute; 
            left: 50%; 
            margin-left:-150px;
            border: 1px solid #666;
            background-color: #000;
            border-radius:5px;
            color: #FFF;
            width:300px;
            z-index:2;
    }
#overlay4 div.background{
            background-color: #000;            
            opacity: 0.5;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            z-index:1;
            position: absolute;
}