JSFiddle - React, Tailwind, and code Playground

by dnag

HTML

<div id="popup_container">
    <div id="popup">
        This is some sample text, just a little bit of sample text.
    </div>
</div>

CSS

#popup {
    display: inline-block;
	background: #FFF;
	border: 1px solid #000;
	box-shadow: 0 0 3px #CCC;
	padding: 10px;
}

#popup_container {
	width: 100%;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	padding: 50px 0 0 0;
	z-index: 11;
}

JavaScript

function resize_popup_container()
{
    var windowWidth = document.documentElement.clientWidth;
    var newWidth = windowWidth - 120;
    var newLeft = (windowWidth - newWidth) / 2;
    $('#popup_container').css('width', newWidth + 'px');
    $('#popup_container').css('left', newLeft + 'px');
}

$(function(){
    $(window).resize(function() {
        resize_popup_container();
    });
    
    resize_popup_container();
});