JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="statement">
    <div class="side">
        <div class="bg" style="background: url(http://picsum.photos/1200/900) no-repeat; background-size: covre; background-position: center;"></div>
        <div class="border">
            <h2>wegwgr</h2>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sit minus consectetur fuga autem est sapiente quos, consequuntur aliquam omnis magnam rem temporibus totam sed dolor accusantium pariatur ipsam possimus!</div>
        </div>
    </div>
    <div class="side">
        <svg xmlns="http://www.w3.org/2000/svg" width="79.098" height="72.506" viewBox="0 0 79.098 72.506">
            <path id="Path_391" data-name="Path 391" d="M72.789,27.925c-.1,0-.188.024-.283.028v-.028a6.6,6.6,0,0,0-6.592-6.592H6.592A6.6,6.6,0,0,0,0,27.925V92.191a1.649,1.649,0,0,0,1.017,1.522,1.629,1.629,0,0,0,.631.126,1.647,1.647,0,0,0,1.165-.483l16-16H65.915a6.6,6.6,0,0,0,6.592-6.592V43.437l4.744-4.743v0a6.307,6.307,0,0,0-4.461-10.767ZM69.21,70.769a3.3,3.3,0,0,1-3.3,3.3H18.126a1.647,1.647,0,0,0-1.165.483L3.3,88.213V27.925a3.3,3.3,0,0,1,3.3-3.3H65.915a3.3,3.3,0,0,1,3.3,3.3V29.05a6.2,6.2,0,0,0-.882.722L50.4,47.7H18.126a1.648,1.648,0,1,0,0,3.3H47.755l-1.582,7.916a1.648,1.648,0,0,0,1.616,1.971,1.682,1.682,0,0,0,.322-.032L56.346,59.2a1.638,1.638,0,0,0,.843-.451L69.21,46.732Zm-14-14.7L49.89,57.134l1.065-5.33L65.914,36.845l4.262,4.262ZM74.92,36.363l-2.414,2.414-4.262-4.262L70.659,32.1a3.014,3.014,0,0,1,4.261,4.263Z" transform="translate(0 -21.333)" fill="#fff" />
            <circle id="Ellipse_9" data-name="Ellipse 9" cx="12" cy="12" r="12" transform="translate(0.393 3)" fill="#ee1c25" />
            <text id="_" data-name="+" transform="translate(6.393 23)" fill="#fff" font-size="24" font-family="PantonMtav3-ExtraBold, PantonMtav3" font-weight="800">
                <tspan x="0" y="0">+</tspan>
            </text>
        </svg>
        <span>Please Fill The Form</span>
    </div>
</div>

CSS

.statement {
    display: flex;
}

.statement .side:nth-child(1) {
    width: calc(100% - 240px);
    margin-right: 30px;
    border-radius: 10px;
    position: relative;
}

.statement .side:nth-child(1) .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.statement .side:nth-child(1) div.border {
    width: 100%;
    height: 100%;
    display: flex;
    border: 10px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 3;
    flex-direction: column;
}

.statement .side:nth-child(1) div h2 {
    font-size: 4em;
    color: white;
    padding-left: 120px;
}

.statement .side:nth-child(1) div.text {
    padding-left: 120px;
}

.statement .side:nth-child(2) {
    width: 240px;
    background: #0C172D;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.statement .side:nth-child(2) span {
    font-size: 1.4em;
    color: white;
}