How would you recreate this background in Tailwind?

[odd verge]

I'd like to recreate the background for my portfolio but in tailwind, anyone got an idea of how you randomly place the shapes in background as shown here.

Thank you and i hope to hear from you soon.

How would you recreate this background in Tailwind?

[copper canopy]

Create a div that take up 100% of the width and height, then create (or get) svg shapes and place them manually at random position in your container.

If you want to do it absolutely random at each reload, you can write a javascript function to do that when the page loads but I think it would be a bit overkill.

PS. You can see how this specific person has done by inspecting their code using the dev menu.

By using google lens I found the website where this is from and it's done the way I said; they are svg shapes positionned at specific positions on in a container.

[odd verge]

oh so like just get a bunch of random shapes and then on a css file:

shape1{
left:100px
right:54px
}

[copper canopy]

Yea

[odd verge]

alright ill give it a shot!

[sleek barn]

wouldn’t scale to mobile tho right? Am thinking JavaScript would be a good alternative too

Or could use tailwinds platform/screen size conditional styling

[copper canopy]

No it should be alright on mobile. Well, if you use % instead of absolute values it will be fine. There's other solutions to this as well. I just gave one possible solution (I think the easiest one). Imo, a javascript based solution will be way overkill and might make your website buggy.

[sleek barn]

oh I see 🤔 you can do it in CSS only w size dependent styling(media query )