Cafe Demo Images — Preview

source.html

<html lang="en" style="--color-primary: #0a26f5; --color-secondary: #D97706; --color-bg: #FFFBEB; --color-text: #78350F;"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Punyaku Coffee - Premium Coffee Experience</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&amp;family=Roboto:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
    <style>
        :root {
            --color-primary: #F59E0B;
            --color-secondary: #10B981;
            --color-bg: #F8FAFC;
            --color-text: #1E293B;
        }

        * {
            font-family: 'Roboto', sans-serif;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .gradient-bg {
            background: linear-gradient...

Buka full source code

Copy & download HTML + Tailwind siap pakai. Atau bikin versimu sendiri dari nol — lebih cepat.

✨ Remix gratis (2 credit) Daftar untuk copy code →