Positioning of HTML elements

[nitish1986]

I'm trying to learn tailwind-css or I would say learning css where I'm struggling with the position of elements. Working on Vue js components.

I achieved the designing few of the elements so far:

https://i.stack.imgur.com/6NIVy.png

I want to add some shapes or designs inside the banner/dark-blue area and then would add some widget-box inside of it. My code look something like this:

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 left-0">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block">
        <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
            <slider></slider>
            <div class="flex justify-around">
                <card></card>
                <card></card>
                <card></card>
                <card></card>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="bg-white overlflow-hidden">
            <div class="relative">
                <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
                <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
            </div>
        </div>
    </div>
    <feature></feature>
</div>

For reference to the components code: https://github.com/nitish1986/sample_website

My approach was to fix position of the parent element or make it relative then position the shapes with absolute positioning respective to its parent element but whenever I try to put absolute position the shapes reaches to the top of the website. It is not taking respective positioning

<div class="bg-white overlflow-hidden">
    <div class="relative">
        <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
        <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
    </div>
</div>

How can achieve this positioning? I want to achieve something like this:

https://i.stack.imgur.com/3DSnS.png

Any better approach into it are most welcome. Thanks.

Reference link on stack-overflow: https://stackoverflow.com/questions/60472110/positioning-of-html-elements-in-tailwind-css