JSFiddle - React, Tailwind, and code Playground

by andyuk

HTML

<div id="container">
    <div class="overlay">This is overlay div.</div>
    <div class="content">This is contents div. This is contents div.</div>
</div>

CSS

#container {
    position: relative;
}

.overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay{
    z-index: 10;
    background: #ccc;
    /* width should expand to width of content, not width of page */
    width: 100%;
    /* height cannot be set as 100% for an absolutely positioned element */
    height: 50px;
    opacity: 0.5
}

.content {
  width: 200px;
  height: 200px;
  background-color: red; 
}