Created
November 20, 2025 06:05
-
-
Save pipethedev/ba5c00c83371859fe930da143eceb13b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Simple Tailwind Slide Deck</title> | |
| <!-- Tailwind CDN (quick prototyping) --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* Force 16:9 slide canvas and center on page */ | |
| :root { | |
| --slide-w: 1280px; | |
| --slide-h: 720px; | |
| } | |
| html, body { | |
| background: #0f172a; /* slate-900 */ | |
| height: 100%; | |
| margin: 0; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .deck { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 24px; | |
| padding: 40px 20px; | |
| } | |
| .slide { | |
| width: var(--slide-w); | |
| height: var(--slide-h); | |
| box-shadow: 0 10px 30px rgba(2,6,23,0.6); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| background: white; | |
| padding: 48px; | |
| box-sizing: border-box; | |
| } | |
| /* Make each .slide a separate printable page (helps HTML->PPTX renderers) */ | |
| @media print { | |
| body { background: white; } | |
| .deck { gap: 0; padding: 0; } | |
| .slide { | |
| box-shadow: none; | |
| border-radius: 0; | |
| width: 100%; | |
| height: auto; | |
| page-break-after: always; | |
| } | |
| } | |
| /* Responsive preview on small screens */ | |
| @media (max-width: 1400px) { | |
| .slide { transform: scale(0.8); transform-origin: top center; } | |
| } | |
| @media (max-width: 1100px) { | |
| .slide { transform: scale(0.6); } | |
| } | |
| /* Decorative accent underline for headings */ | |
| .accent { | |
| display: inline-block; | |
| height: 6px; | |
| width: 64px; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg,#7c3aed,#06b6d4); | |
| margin-top: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="deck"> | |
| <!-- Slide 1: Title --> | |
| <section class="slide flex flex-col justify-center"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-5xl font-extrabold text-slate-900">Product Overview</h1> | |
| <div class="accent mx-auto"></div> | |
| <p class="mt-6 text-lg text-slate-700">A short tagline that explains the product — one line that sells it.</p> | |
| <div class="mt-8 flex justify-center gap-4"> | |
| <span class="inline-block px-4 py-2 bg-slate-100 rounded-full text-slate-600 text-sm">Q4 2025</span> | |
| <span class="inline-block px-4 py-2 bg-slate-100 rounded-full text-slate-600 text-sm">Acme Corp</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 2: Problem / Opportunity --> | |
| <section class="slide"> | |
| <div class="flex h-full"> | |
| <div class="w-1/2 pr-8 flex flex-col justify-center"> | |
| <h2 class="text-3xl font-bold text-slate-900">Problem & Opportunity</h2> | |
| <div class="accent"></div> | |
| <ul class="mt-6 space-y-3 text-lg text-slate-700 list-disc pl-6"> | |
| <li>Customers struggle to create consistent slide decks quickly.</li> | |
| <li>Design-heavy templates are time-consuming to adapt.</li> | |
| <li>Automated generation can save hours per deck.</li> | |
| </ul> | |
| </div> | |
| <div class="w-1/2 pl-8 flex items-center justify-center"> | |
| <div class="w-full h-56 bg-gradient-to-tr from-purple-400 to-cyan-400 rounded-lg flex items-center justify-center text-white text-xl font-semibold"> | |
| Visual: Opportunity Chart | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 3: Features (icon list) --> | |
| <section class="slide"> | |
| <h3 class="text-2xl font-bold text-slate-900">Core Features</h3> | |
| <div class="accent"></div> | |
| <div class="mt-6 grid grid-cols-2 gap-6"> | |
| <div class="p-4 rounded-lg border border-slate-100"> | |
| <h4 class="font-semibold">Template Library</h4> | |
| <p class="mt-2 text-slate-600">Hundreds of professionally designed templates.</p> | |
| </div> | |
| <div class="p-4 rounded-lg border border-slate-100"> | |
| <h4 class="font-semibold">One-click Export</h4> | |
| <p class="mt-2 text-slate-600">Export to PPTX, PDF, images instantly.</p> | |
| </div> | |
| <div class="p-4 rounded-lg border border-slate-100"> | |
| <h4 class="font-semibold">AI Content Assist</h4> | |
| <p class="mt-2 text-slate-600">Rewrite, summarize, and expand slide copy.</p> | |
| </div> | |
| <div class="p-4 rounded-lg border border-slate-100"> | |
| <h4 class="font-semibold">Brand Controls</h4> | |
| <p class="mt-2 text-slate-600">Lock fonts, colors and layout for consistency.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 4: Image + Caption --> | |
| <section class="slide"> | |
| <div class="flex h-full"> | |
| <div class="w-2/3 pr-6 flex items-center"> | |
| <!-- Placeholder image using SVG inline so the deck is self-contained --> | |
| <svg width="100%" height="100%" viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice" class="rounded-lg"> | |
| <defs> | |
| <linearGradient id="g1" x1="0" x2="1"> | |
| <stop offset="0" stop-color="#7c3aed"/> | |
| <stop offset="1" stop-color="#06b6d4"/> | |
| </linearGradient> | |
| </defs> | |
| <rect width="800" height="450" rx="16" fill="url(#g1)"/> | |
| <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="36" fill="white" font-family="sans-serif">Product Screenshot</text> | |
| </svg> | |
| </div> | |
| <div class="w-1/3 pl-6 flex flex-col justify-center"> | |
| <h4 class="text-xl font-bold text-slate-900">Screenshot</h4> | |
| <p class="mt-3 text-slate-600">A short caption describing what the screenshot shows and why it matters.</p> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-block px-4 py-2 rounded bg-slate-900 text-white">Learn more</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 5: Closing / CTA --> | |
| <section class="slide flex flex-col justify-center items-center text-center"> | |
| <h2 class="text-3xl font-bold text-slate-900">Next Steps</h2> | |
| <div class="accent"></div> | |
| <p class="mt-4 text-slate-700 max-w-2xl">Schedule a demo, try the templates, or request a custom brand pack. We're happy to help you get started.</p> | |
| <div class="mt-8 flex gap-4"> | |
| <a class="px-6 py-3 rounded-lg border border-slate-900" href="#">Book a demo</a> | |
| <a class="px-6 py-3 rounded-lg bg-slate-900 text-white" href="#">Start trial</a> | |
| </div> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment