JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="power">
    <div class="fragment"></div>
    <div class="container">
        <div class="image">
            <img src="https://picsum.photos/id/532/1920/1081" alt="">
        </div>
        <div class="bottle">
            <img src="https://picsum.photos/id/82/500/500" alt="">
        </div>
        <div class="text-content">
            <h3>when you feel</h3>
            <h2>the power</h2>
            <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit assumenda repellat, accusantium eum ducimus, porro totam? Veritatis sunt laudantium quas itaque, eum, suscipit iusto incidunt, aliquam cupiditate deserunt pariatur excepturi. Lorem ipsum dolor
                sit amet, consectetur adipisicing elit. Sit assumenda repellat, accusantium eum ducimus, porro totam? Veritatis sunt laudantium quas itaque, eum, suscipit iusto incidunt, aliquam cupiditate deserunt pariatur excepturi. Lorem ipsum dolor
                sit amet, consectetur adipisicing elit. Sit assumenda repellat, accusantium eum ducimus, porro totam? Veritatis sunt laudantium quas itaque, eum, suscipit iusto incidunt, aliquam cupiditate deserunt pariatur excepturi.
            </div>
            <a href="" class="story">
        <span class="dv">Watch the Story</span>
        <svg class="dv" xmlns="https://www.w3.org/2000/svg" width="28.53" height="32.2" viewBox="0 0 28.53 32.2">
                  <path id="play-1" d="M-525.582,730.41l23.31-13.458a1.6,1.6,0,0,0,.9-1.352,1.6,1.6,0,0,0-.9-1.352l-23.31-13.458a1.846,1.846,0,0,0-.934-.29,1.451,1.451,0,0,0-1.384,1.642v26.916a1.469,1.469,0,0,0,1.384,1.642A1.846,1.846,0,0,0-525.582,730.41Zm-1.223-1.352V702.142c0-.193.032-.483.258-.483a.767.767,0,0,1,.386.129l23.31,13.458c.193.129.322.258.322.354s-.129.258-.322.354l-23.31,13.458a.686.686,0,0,1-.386.129C-526.773,729.573-526.805,729.251-526.805,729.058Z" transform="translate(528.9 -699.5)" fill="#84bede" stroke="#84bede" stroke-width="2"></path>
         </svg>
   ...

CSS

body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

div#power {
    width: 100%;
    position: relative;
}

div#power div.fragment {
    width: 100%;
    padding-top: 20%;
    -webkit-clip-path: polygon(0 60%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 60%, 100% 0, 100% 100%, 0% 100%);
    background: lightblue;
    position: absolute;
    bottom: 0;
    left: 0;
}

div#power div.container {
    width: 100%;
    position: relative;
    padding: 0 78px;
}

div#power div.container div.image {
    width: 80%;
    margin-left: 20%;
    padding-top: 50%;
    position: relative;
}

div#power div.container div.image img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

div#power div.container div.bottle {
    position: absolute;
    bottom: 0;
    width: 365px;
    height: 640px;
}

div#power div.container div.bottle img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
}

div#power div.container div.text-content {
    position: absolute;
    bottom: 0;
    left: calc(78px + 365px);
    width: 30%;
}