JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<!-- Website container -->
<div id="container">
<!-- Some container with from the database loaded content -->
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros id leo ullamcorper eleifend. Nunc vel neque vitae nulla fermentum venenatis quis vel diam. Quisque ac tortor turpis. Nulla gravida rutrum enim et molestie. Cras ac leo erat, a tincidunt dui. Donec et tortor sed lectus adipiscing aliquam. Praesent id lorem lacus, non condimentum elit. Donec lobortis dolor sit amet risus pellentesque euismod. Nullam rhoncus dapibus cursus. Praesent vulputate laoreet justo, nec fringilla dui tempus ut. Ut in elit est, non condimentum tellus.
</div>
<!-- A div overlapping the content (E.G. Containing a cloud floating over the content -->
<div id="cloud">
I'm a cloud
</div>
</div>
</body>
</html>

CSS

body{
background-color: #8888FF;
}
#container{
position: relative;
width: 400px;
background-color:#CFCFFF;
height: auto;
margin: 10px auto;
padding: 10px;
}
#content{
background-color: #FFDFDF;
width: 340px;
padding: 5px;
}
#cloud{
width: 130px;
height: 100px;
background-color:#FFF;
position: absolute;
right: -20px;
top: 120px;
text-align: center;
line-height: 100px;
color: #999;
font-size: 12px;
}