Credit Card Grid
Visit Source of Grid
Details
By:
Arunava Das
Source:
https://dribbble.com/shots/25693728-Bento-Grid-Layout-Features-Benefits-SectionTags
Light ModeMediumFintechCardsLightFeatures
Source Code
1
2
3
4
5
6
CreditCardGrid.jsx
1function CreditCardGrid(){
2 return (
3 <div className="grid grid-cols-10 grid-rows-8 gap-4">
4 {/* Left Hero Block */}
5 <div className="col-span-4 row-span-5">1</div>
6
7 {/* Right Top Bar */}
8 <div className="col-span-6 row-span-2">2</div>
9
10 {/* Right Mid Blocks */}
11 <div className="col-span-3 row-span-3">3</div>
12 <div className="col-span-3 row-span-3">4</div>
13
14 {/* Bottom Blocks */}
15 <div className="col-span-6 row-span-3">5</div>
16 <div className="col-span-4 row-span-3">6</div>
17 </div>
18 );
19};