JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div id="imgContainer">
    <img src="http://static.arstechnica.net/assets/2010/11/feat-logic1-sq-thumb-280x280-17662-f.jpg" alt="" />
    <div id="slogan">
        <span class="quote">Some text here</span>
    </div>
</div>

<div id="footer" class="gray_top_border">
    Some text here
</div>

CSS

#imgContainer {
    position: relative;
    width: 280px;
    height: 280px;
}

#slogan {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

#slogan .quote {
    padding: 8px 15px;
    display: inline-block;
}