JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="overview">
    <div id="banner">
        <img src="http://www.placehold.it/1200x600"/>
        <div id="info">
            <div id="franchise"></div>
            <div id="identity">
                <span id="name">Name</span><br/>
                <span id="title">Title of Name g</span>
            </div>
        </div>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
}
#banner {
    width:100%;
    position:relative;
    overflow:hidden;
}

#banner > img {
    width:100%;
    transform: scale(2);
    display:block;
}

#info {
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
}

#identity {
    display:inline-block;
    text-align:left;
}
#name {
    font-size:2em;
    font-weight:bold;
}
#title {
    font-size:1em;
    font-weight:bold;
}
#franchise {
    width:8vmin;
    height:8vmin;
    display:inline-block;
    background:#000;
}