How to implement:
With tailwind installed in your project (tutorial), implement these tailwind classes in your parent div where it will reflect the background.
export default function Background() {
return (
<section className="relative overflow-hidden bg-gradient-to-t from-zinc-950 to-zinc-950 w-screen h-screen">
<svg className="absolute scale-150 bottom-5 opacity-10" viewBox="0 0 2665 434" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M55.9978 424.81H2608.43L1540.02 9.18988H1124.4L55.9978 424.81Z" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1118.63 11.4336H1545.79" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1112.54 13.8054H1551.89" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1106.08 16.3166H1558.34" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1099.24 18.9799H1565.19" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1091.96 21.8095H1572.46" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1084.22 24.8214H1580.2" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1075.96 28.034H1588.46" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1067.13 31.4679H1597.29" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1057.68 35.1468H1606.75" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1047.52 39.0979H1616.9" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1036.58 43.3526H1627.84" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1024.77 47.9473H1639.65" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1011.98 52.9243H1652.45" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M998.071 58.3337H1666.35" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M982.904 64.2341H1681.52" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M966.293 70.6956H1698.13" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M948.024 77.8024H1716.4" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M927.836 85.6561H1736.59" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M905.407 94.3809H1759.02" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M880.345 104.13H1784.08" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M852.156 115.096H1812.27" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M820.215 127.522H1844.21" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M783.721 141.718H1880.7" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M741.625 158.094H1922.8" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M692.531 177.192H1971.89" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M634.535 199.753H2029.89" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M564.974 226.813H2099.45" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M480.005 259.867H2184.42" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M373.873 301.153H2290.55" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M237.545 354.186H2426.88" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2526.09 424.81L1526.61 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2443.75 424.81L1513.21 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2361.42 424.81L1499.8 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2279.08 424.81L1486.39 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2196.74 424.81L1472.99 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2114.41 424.81L1459.58 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M2032.07 424.81L1446.17 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1949.73 424.81L1432.76 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1867.4 424.81L1419.36 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1785.06 424.81L1405.95 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1702.73 424.81L1392.54 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1620.39 424.81L1379.14 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1538.05 424.81L1365.73 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1455.72 424.81L1352.32 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1373.38 424.81L1338.92 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1291.04 424.81L1325.51 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1208.71 424.81L1312.1 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1126.37 424.81L1298.69 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M1044.03 424.81L1285.29 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M961.698 424.81L1271.88 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M879.362 424.81L1258.47 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M797.025 424.81L1245.07 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M714.689 424.81L1231.66 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M632.352 424.81L1218.25 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M550.016 424.81L1204.84 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M467.68 424.81L1191.44 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M385.343 424.81L1178.03 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M303.007 424.81L1164.62 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M220.671 424.81L1151.22 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
<path d="M138.334 424.81L1137.81 9.18988" stroke="white" stroke-width="1.0391" stroke-miterlimit="10"></path>
</svg>
{/* Your page or component */}
</section>
);
}View background:
Mobile and Desktop:
Note
If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.
Any questions, criticisms or improvements, please suggest them through my Linkdin..