JSFiddle - React, Tailwind, and code Playground

by Alfred Huang

HTML

<div id="outer">
    <img id="inner-back" src="http://www.google.cn/landing/cnexp/google-search.png" />
    <div id="inner-up">upper-text</div>
    <div id="inner-down">upper-down</div>
</div>

CSS

#outer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
img#inner-back {
    width: 100%;
}
#inner-up {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: blue;
    opacity: 0.5;
    color: white;
    text-align: center;
    vertical-align: middle;
}
#inner-down {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: green;
    opacity: 0.5;
    color: white;
    text-align: center;
    vertical-align: middle;
}