JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<main class="flexShell">
    <div data-content="TEXT THAT IS POSITIONED DEAD CENTER! THIS ADDED TEXT IS TO TEST THE WIDTH AND WRAPPING CAPABILITIES" class="teamleft flexItem"></div>
</main>

CSS

/*=-=-[ RESET PROPERTIES ]-=-=*/
/* http://goo.gl/3ed2H */
html {
    box-sizing: border-box;
    font: 500 16px/1.5 Consolas;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
/*=-=-[ FLEXBOX CLASSES ]-=-=*/
/* https://goo.gl/WySM2z */
.flexShell {
    display: flex;
    display: -webkit-flex;
    position: relative;
    overflow-y: none;
}
.flexItem {
    flex: 1 0 auto;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow-y: none;
}
/*=-=-[ TEAMLEFT ]-=-=*/
.teamleft {
    position: absolute;
    width: 50vw;           /* http://goo.gl/DkXR5F */
    height: 100vh;
    background-color: #25335a;
}
.teamleft:after {
    position: absolute;
    left: 25%;             /* https://goo.gl/S1mNoN */
    top: 50%;
    content: attr(data-content);
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    text-align: center;
    width: 50%;             
    background-color: transparent;
    display: table-cell;      /* https://goo.gl/lzmCyg */
    overflow-y: none;        /* https://goo.gl/o1Oqbf */
}
.teamleft:hover:after {
    opacity: 1;
}