JSFiddle - React, Tailwind, and code Playground

by Artur Stambultsian

HTML

<div class="container">
    <img src="http://img0.liveinternet.ru/images/attach/c/1//62/347/62347837_27_01_2010_0268711001264584676_jeanfrancoisgratton.jpg" alt=""/>
    <div class="sign">
        <div class="sign-inner">
            <h1>Label</h1>    
            <span>Sign for picture</span>
        </div>            
    </div>
</div>

CSS

.container {
    width: 300px;
    border: 60px solid #000;
    position: relative;
}
        img {
            display: block;
            width: 280px;
            border: 10px solid #000;
            box-shadow: 0 0 0 5px #fff;
        }
        .sign {
           	position: relative;
		    float: left;
		    left: 50%;
        }
            .sign-inner {
                position: relative;
		        float: left;
		        right: 50%;
                background: #fff;
                bottom: 40px;
                width: 200px;
                height: 80px;
                text-align: center;
                box-shadow: 0 0 10px 0 #000;
            }
                .sign-inner h1 {
                    margin: 10px 0 0 0;
                    color: #f00;
                }