How to make this notch like design using html, css or tailwindcss

I need to make this design.

I used this clip-path method but the edges is not smooth. how can i achieve the design?

.nav {
    width: 14rem;
    height: 4rem;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

It's hard to do this with polygon. You could try to add more points (a lot more) but the result might not be perfect. Much better result would be with path property but it's not fully supported yet (https://caniuse.com/css-clip-path).

I would go for SVG background or box-shadow.

If you could export path as an svg from your design source file it would be the fastest way ;) If not you can always try to draw it for yourself (e.g. in Inkscape).

For box-shadow approach you would have to do 4 divs with custom made shadows (2 on the left and 2 on the right side of the 'notch'). Here you can check how to make curved shape as box-shadow: https://css-tricks.com/the-shapes-of-css/#aa-reverse-corners-via-zberno.