Dashed Bottom Fade Grid

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51

<div className="min-h-screen w-full relative">  {/* Dashed Bottom Fade Grid */}  <div    className="absolute inset-0 z-0"    style={{      backgroundImage: `        linear-gradient(to right, #e7e5e4 1px, transparent 1px),        linear-gradient(to bottom, #e7e5e4 1px, transparent 1px)      `,      backgroundSize: "20px 20px",      backgroundPosition: "0 0, 0 0",      maskImage: `         repeating-linear-gradient(              to right,              black 0px,              black 3px,              transparent 3px,              transparent 8px            ),            repeating-linear-gradient(              to bottom,              black 0px,              black 3px,              transparent 3px,              transparent 8px            ),            radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)      `,      WebkitMaskImage: `  repeating-linear-gradient(              to right,              black 0px,              black 3px,              transparent 3px,              transparent 8px            ),            repeating-linear-gradient(              to bottom,              black 0px,              black 3px,              transparent 3px,              transparent 8px            ),            radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)      `,      maskComposite: "intersect",      WebkitMaskComposite: "source-in",    }}  />  {/* Your Content/Components */}</div>