JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div class="wrap">
    <div class="row">
        <div><img src="http://www.theok.gr/inflight/img/holder.png" /></div>
    </div>
</div>

CSS

html,
body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: #333;
}

.wrap {
    height: 100%
}

.row {
    height: 100%;
    white-space: nowrap;
    font-size: 0;
    text-align: center;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%)
}

.row * {
    vertical-align: middle
}

.row div {
    display: inline-block;
    height: 50%;
    position: relative
}

img {
    height: 100%;
    width: auto;
    position: relative
}

.row div::after {
    content: "";
    font-size: 32px;
    line-height: 38px;
    white-space: normal;
    color: #fff;
    display: inline-block;
    padding: 0 10%;
    text-align: center;
    vertical-align: middle;
    opacity: 1;
    transform: scale(.75) translateY(-50%);
    top: 50%;
    cursor: default;
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    transition: all 1s ease-out
}

.row div::after {
    content:url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="5.5 800.5 35 15"%3e %3cstyle%3e.a%7Bfill%3A%23ffffff%7D%3c/style%3e %3cpath d="M24.5 801.2l-0.4-0.4c-0.1-0.1-0.2-0.1-0.3-0.2l-1-0.1c-0.1 0-0.2 0.1-0.1 0.2l1.1 1.1c0.1 0.1 0.2 0.1 0.3 0l0.3-0.3C24.6 801.4 24.6 801.2 24.5 801.2z" class="a"/%3e%3cpath d="M22.1 813L22.1 813c-0.1-0.1-0.4-0.1-0.5 0 -0.1 0.1-0.1 0.4 0 0.5l0 0c0.1 0.1 0.4 0.1 0.5 0C22.3 813.4 22.3 813.2 22.1 813z" class="a"/%3e%3cpath d="M26 812.7l0.5-3c0-0.1-0.1-0.2-0.2-0.1 -0.2 0.1-0.3 0.2-0.3 0.2 -1.5-0.1-1.8 0-3.3 1.5 0 0 0 0 0 0l-1.9 1.9c-0.2 0.2-0.4 0.1-0.5 0 -0.1-0.1-0.2-0.4 0-0.5l6.8-7.4c0 0 2.1-1.8-0.2-2.8 -0.2-0.1-0.4-0.1-0.6-0.2 -0.3-0.1-1-0.2-1.5-0.7l-0.5 0.5c0.3 0.3 0.7 0.5 1.1 0.7 0.1 0 0.3 0.1 0.4 0.2 1 0.4 0.9 1 0.4 1.5 0 0-2.6 2.3-4.7 4.3 -0.2-0.1-0.9-0.5-1.1-0.1 0 0.1 0 0.3 0.2 0.3 0 0 0.1 0 0.1 0 0.2 0 0.5-0.1 0.6 0 -0.9 0.9-1.8 1.7-2.3 2.2 -0.5 0.5-1.6 2.1-0.2 3.5 0.7 0.7 1.5 1.1 2.8 0.3 0.3-0.2 1-0.9 1.2-1.1 0.6-0.6 1.9-1.8 2.6-1.5 0.1 0.1 0.3 0.2 0.4 0.3C25.8...