Sync SaaS Branding
Visit Source of Grid
Tags
Light ModeComplexSaaSSync SaaSRedGreenOff White
Source Code
1
2
3
4
5
6
7
SyncSaasGrid.jsx
1export default function SyncSaasGrid() {
2 return (
3 <div className="grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-7 gap-4 w-full p-4 lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (md): Stacked 1-column with increased height
6 Desktop (lg): 3-column, 7-row complex bento grid */}
7
8 {/* Box 1 */}
9 <div className="h-40 md:h-64 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
10 1
11 </div>
12
13 {/* Box 2 */}
14 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 lg:col-start-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
15 2
16 </div>
17
18 {/* Box 3 */}
19 <div className="h-40 md:h-64 lg:h-auto lg:row-span-3 lg:row-start-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
20 3
21 </div>
22
23 {/* Box 4 */}
24 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 lg:row-start-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
25 4
26 </div>
27
28 {/* Box 5 */}
29 <div className="h-40 md:h-64 lg:h-auto lg:row-span-5 lg:row-start-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
30 5
31 </div>
32
33 {/* Box 6 */}
34 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 lg:col-start-1 lg:row-start-6 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
35 6
36 </div>
37
38 {/* Box 7 */}
39 <div className="h-40 md:h-64 lg:h-auto lg:row-span-3 lg:col-start-2 lg:row-start-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
40 7
41 </div>
42 </div>
43 );
44};