Skip to content

Instantly share code, notes, and snippets.

@shricodev

shricodev/globals.css Secret

Created July 15, 2025 11:14
Show Gist options
  • Save shricodev/85a3f5162df38a9779bd5f99acd7fa5b to your computer and use it in GitHub Desktop.
Save shricodev/85a3f5162df38a9779bd5f99acd7fa5b to your computer and use it in GitHub Desktop.
Download ZIP
Figma MCP Implementation - Claude Opus 4 - Blog Demo
Raw
globals.css
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
Raw
layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600"],
variable: "--font-poppins",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${poppins.variable} antialiased`}
>
{children}
</body>
</html>
);
}
Raw
page.tsx
import Image from "next/image";
export default function Home() {
return (
<div className="relative w-[1440px] h-[900px] bg-[#101010] rounded-[30px] mx-auto">
{/* Sidebar */}
<div className="absolute left-[80px] top-[65px] w-[197px] h-[651px] text-white">
<div className="absolute left-0 top-[15px] w-[72px] h-[72px]">
<Image src="/profile.png" alt="Profile" width={72} height={72} className="rounded-[13px]" />
</div>
<p className="absolute left-0 top-[107px] font-semibold text-[30px] leading-[35px]">Samantha</p>
<p className="absolute left-0 top-[147px] text-[17px] leading-[27px] opacity-60">samantha@email.com</p>
{/* Notifications */}
<div className="absolute left-[57px] top-0 w-[29px] h-[29px]">
<div className="absolute left-0 top-0 w-[29px] h-[29px] bg-[#DC3434] rounded-full"></div>
<p className="absolute left-[10px] top-[4px] font-semibold text-[13px] leading-[20px]">4</p>
</div>
{/* Menu */}
<div className="absolute left-0 top-[291px] w-[142px] h-[360px] font-semibold text-[25px] leading-[35px]">
<p className="absolute left-0 top-0 opacity-50">Dashboard</p>
<p className="absolute left-0 top-[65px]">Expenses</p>
<p className="absolute left-0 top-[130px] opacity-50">Wallets</p>
<p className="absolute left-0 top-[195px] opacity-50">Summary</p>
<p className="absolute left-0 top-[260px] opacity-50">Accounts</p>
<p className="absolute left-0 top-[325px] opacity-50">Settings</p>
</div>
</div>
{/* Content */}
<div className="absolute left-[360px] top-[20px] w-[1060px] h-[860px]">
<div className="absolute left-0 top-0 w-[1060px] h-[860px] bg-white rounded-[30px]"></div>
{/* Main Content */}
<div className="absolute left-[100px] top-[60px] w-[510px] h-[741px]">
{/* Title */}
<div className="absolute left-0 top-0 w-[195px] h-[84px]">
<p className="absolute left-0 top-0 text-[#262A41] font-semibold text-[40px] leading-[50px]">Expenses</p>
<p className="absolute left-0 top-[60px] text-[#101010] text-[16px] leading-[24px] opacity-50">01 - 25 March, 2020</p>
</div>
{/* Users */}
<div className="absolute left-[387px] top-[13px] w-[123px] h-[31px]">
<div className="absolute left-0 top-0 w-[87px] h-[31px]">
<Image className="absolute left-[56px] top-0 rounded-full" src="/user1.png" alt="User 1" width={31} height={31} />
<Image className="absolute left-[28px] top-0 rounded-full" src="/user2.png" alt="User 2" width={31} height={31} />
<Image className="absolute left-0 top-0 rounded-full" src="/user3.png" alt="User 3" width={31} height={31} />
</div>
<Image className="absolute left-[99px] top-[4px]" src="/plus-icon.svg" alt="Add user" width={24} height={24} />
</div>
{/* Chart */}
<div className="absolute left-0 top-[130px] w-[510px] h-[60px]">
<div className="absolute left-0 top-[25px] w-[16px] h-[35px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[22px] top-[8px] w-[16px] h-[52px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[45px] top-[16px] w-[16px] h-[44px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[67px] top-[33px] w-[16px] h-[27px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[90px] top-[25px] w-[16px] h-[35px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[112px] top-[30px] w-[16px] h-[30px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[135px] top-[16px] w-[16px] h-[44px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[157px] top-[33px] w-[16px] h-[27px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[180px] top-[25px] w-[16px] h-[35px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[202px] top-[8px] w-[16px] h-[52px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[225px] top-[16px] w-[16px] h-[44px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[247px] top-[33px] w-[16px] h-[27px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[269px] top-[25px] w-[16px] h-[35px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[292px] top-[30px] w-[16px] h-[30px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[314px] top-[16px] w-[16px] h-[44px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[337px] top-[33px] w-[16px] h-[27px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[359px] top-[25px] w-[16px] h-[35px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[382px] top-[8px] w-[16px] h-[52px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[404px] top-[16px] w-[16px] h-[44px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[427px] top-[33px] w-[16px] h-[27px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[449px] top-[25px] w-[16px] h-[35px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[472px] top-0 w-[16px] h-[60px] bg-[#157AFF] opacity-20 rounded"></div>
<div className="absolute left-[494px] top-[16px] w-[16px] h-[44px] bg-[#157AFF] opacity-20 rounded"></div>
</div>
{/* Today */}
<div className="absolute left-0 top-[237px] w-[500px] h-[38.5px]">
<p className="absolute left-0 top-0 text-[#262A41] text-[18px] leading-[30px] font-normal">Today</p>
<div className="absolute left-[475px] top-[13px] flex gap-[10px]">
<div className="w-[5px] h-[5px] bg-[#D8D8D8] rounded-full"></div>
<div className="w-[5px] h-[5px] bg-[#D8D8D8] rounded-full"></div>
<div className="w-[5px] h-[5px] bg-[#D8D8D8] rounded-full"></div>
</div>
<div className="absolute left-0 top-[37.5px] w-[500px] border-t-[0.5px] border-[#DEDEDE] opacity-50"></div>
</div>
{/* Lists */}
<div className="absolute left-0 top-[301px] w-[500px] h-[49px]">
<Image className="absolute left-0 top-0" src="/grocery-icon.svg" alt="Grocery" width={48} height={48} />
<p className="absolute left-[65px] top-0 text-[#273240] font-medium text-[16px] leading-[24px]">Grocery</p>
<p className="absolute left-[65px] top-[28px] text-[#404852] text-[14px] leading-[21px] opacity-50">5:12 pm • Belanja di pasar</p>
<p className="absolute right-0 top-0 text-[#273240] font-semibold text-[16px] leading-[24px] text-right">-326.800</p>
</div>
<div className="absolute left-0 top-[374px] w-[500px] h-[49px]">
<Image className="absolute left-0 top-0" src="/transport-icon.svg" alt="Transportation" width={48} height={48} />
<p className="absolute left-[65px] top-0 text-[#273240] font-medium text-[16px] leading-[24px]">Transportation</p>
<p className="absolute left-[65px] top-[28px] text-[#404852] text-[14px] leading-[21px] opacity-50">5:12 pm • Naik bus umum</p>
<p className="absolute right-0 top-0 text-[#273240] font-semibold text-[16px] leading-[24px] text-right">-15.000</p>
</div>
<div className="absolute left-0 top-[447px] w-[500px] h-[49px]">
<Image className="absolute left-0 top-0" src="/housing-icon.svg" alt="Housing" width={48} height={48} />
<p className="absolute left-[65px] top-0 text-[#273240] font-medium text-[16px] leading-[24px]">Housing</p>
<p className="absolute left-[65px] top-[28px] text-[#404852] text-[14px] leading-[21px] opacity-50">5:12 pm • Bayar Listrik</p>
<p className="absolute right-0 top-0 text-[#273240] font-semibold text-[16px] leading-[24px] text-right">-185.750</p>
</div>
<div className="absolute left-0 top-[555px] w-[500px] h-[38.5px]">
<p className="absolute left-0 top-0 text-[#262A41] text-[18px] leading-[30px] font-normal">Monday, 23 March 2020</p>
<div className="absolute left-[475px] top-[13px] flex gap-[10px]">
<div className="w-[5px] h-[5px] bg-[#D8D8D8] rounded-full"></div>
<div className="w-[5px] h-[5px] bg-[#D8D8D8] rounded-full"></div>
<div className="w-[5px] h-[5px] bg-[#D8D8D8] rounded-full"></div>
</div>
<div className="absolute left-0 top-[37.5px] w-[500px] border-t-[0.5px] border-[#DEDEDE] opacity-50"></div>
</div>
<div className="absolute left-0 top-[619px] w-[500px] h-[49px]">
<Image className="absolute left-0 top-0" src="/food-icon.svg" alt="Food and Drink" width={48} height={48} />
<p className="absolute left-[65px] top-0 text-[#273240] font-medium text-[16px] leading-[24px]">Food and Drink</p>
<p className="absolute left-[65px] top-[28px] text-[#404852] text-[14px] leading-[21px] opacity-50">5:12 pm • Makan Steak</p>
<p className="absolute right-0 top-0 text-[#273240] font-semibold text-[16px] leading-[24px] text-right">-156.000</p>
</div>
<div className="absolute left-0 top-[692px] w-[500px] h-[49px]">
<Image className="absolute left-0 top-0" src="/entertainment-icon.svg" alt="Entertainment" width={48} height={48} />
<p className="absolute left-[65px] top-0 text-[#273240] font-medium text-[16px] leading-[24px]">Entertainment</p>
<p className="absolute left-[65px] top-[28px] text-[#404852] text-[14px] leading-[21px] opacity-50">5:12 pm • Nonton Bioskop</p>
<p className="absolute right-0 top-0 text-[#273240] font-semibold text-[16px] leading-[24px] text-right">-35.200</p>
</div>
</div>
{/* Right Content */}
<div className="absolute left-[710px] top-0 w-[350px] h-[860px]">
<div className="absolute left-0 top-0 w-[350px] h-[860px] bg-[#F9FAFC]"></div>
{/* Stats */}
<div className="absolute left-[50px] top-[76px] w-[250px] h-[365px]">
<p className="absolute left-0 top-0 text-[#262A41] text-[20px] leading-[30px] font-normal">Where your money go?</p>
<div className="absolute left-0 top-[60px] w-[250px] h-[37px]">
<p className="absolute left-0 top-0 text-[#273240] font-medium text-[13px] leading-[24px]">Food and Drinks</p>
<p className="absolute right-0 top-0 text-[#273240] text-[13px] leading-[24px] text-right">872.400</p>
<div className="absolute left-0 top-[32px] w-[250px] h-[5px] bg-[#ECEFF5] rounded-[5px]"></div>
<div className="absolute left-0 top-[32px] w-[70px] h-[5px] bg-[#31BA96] rounded-[5px]"></div>
</div>
<div className="absolute left-0 top-[127px] w-[250px] h-[37px]">
<p className="absolute left-0 top-0 text-[#273240] font-medium text-[13px] leading-[24px]">Shopping</p>
<p className="absolute right-0 top-0 text-[#273240] text-[13px] leading-[24px] text-right">1.378.200</p>
<div className="absolute left-0 top-[32px] w-[250px] h-[5px] bg-[#ECEFF5] rounded-[5px]"></div>
<div className="absolute left-0 top-[32px] w-[110px] h-[5px] bg-[#31BA96] rounded-[5px]"></div>
</div>
<div className="absolute left-0 top-[194px] w-[250px] h-[37px]">
<p className="absolute left-0 top-0 text-[#273240] font-medium text-[13px] leading-[24px]">Housing</p>
<p className="absolute right-0 top-0 text-[#273240] text-[13px] leading-[24px] text-right">928.500</p>
<div className="absolute left-0 top-[32px] w-[250px] h-[5px] bg-[#ECEFF5] rounded-[5px]"></div>
<div className="absolute left-0 top-[32px] w-[90px] h-[5px] bg-[#31BA96] rounded-[5px]"></div>
</div>
<div className="absolute left-0 top-[261px] w-[250px] h-[37px]">
<p className="absolute left-0 top-0 text-[#273240] font-medium text-[13px] leading-[24px]">Transportation</p>
<p className="absolute right-0 top-0 text-[#273240] text-[13px] leading-[24px] text-right">420.700</p>
<div className="absolute left-0 top-[32px] w-[250px] h-[5px] bg-[#ECEFF5] rounded-[5px]"></div>
<div className="absolute left-0 top-[32px] w-[60px] h-[5px] bg-[#31BA96] rounded-[5px]"></div>
</div>
<div className="absolute left-0 top-[328px] w-[250px] h-[37px]">
<p className="absolute left-0 top-0 text-[#273240] font-medium text-[13px] leading-[24px]">Vehicle</p>
<p className="absolute right-0 top-0 text-[#273240] text-[13px] leading-[24px] text-right">520.000</p>
<div className="absolute left-0 top-[32px] w-[250px] h-[5px] bg-[#ECEFF5] rounded-[5px]"></div>
<div className="absolute left-0 top-[32px] w-[90px] h-[5px] bg-[#31BA96] rounded-[5px]"></div>
</div>
</div>
{/* Box Tips */}
<div className="absolute left-[50px] top-[508px] w-[250px] h-[292px]">
<div className="absolute left-0 top-[34px] w-[250px] h-[258px] bg-[#EDF0F6] rounded-[15px]"></div>
<Image className="absolute left-[172px] top-0" src="/illustration1.svg" alt="Illustration 1" width={53} height={90} />
<Image className="absolute left-[25px] top-[19px]" src="/illustration2.svg" alt="Illustration 2" width={84} height={72} />
<p className="absolute left-[25px] top-[111px] text-[#273240] font-semibold text-[16px] leading-[24px]">Save more money</p>
<p className="absolute left-[25px] top-[139px] w-[200px] text-[#404852] text-[12px] leading-[21px] opacity-70">eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
<div className="absolute left-[25px] top-[222px] w-[200px] h-[45px] bg-[#101010] rounded-[8px] flex items-center justify-center">
<p className="text-white font-semibold text-[13px] leading-[20px]">VIEW TIPS</p>
</div>
</div>
</div>
</div>
</div>
);
}
@mourad200875-lang
Copy link

mourad200875-lang commented Nov 11, 2025

اريد النسخه الاعلى والأقوى

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment