Last active
May 10, 2026 15:00
-
-
Save affandhia/0aac4c511edcb22b15571f3bb44a9ab4 to your computer and use it in GitHub Desktop.
React + Tailwind + Framer Motion + Lucide standalone starter kit
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> | |
| <!-- Core document metadata --> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Hello World - React + Tailwind</title> | |
| <meta | |
| name="description" | |
| content="A standalone Hello World app built with React, Tailwind CSS, Framer Motion, and Lucide React." | |
| /> | |
| <meta name="keywords" content="React, Tailwind CSS, Framer Motion, Lucide, Hello World" /> | |
| <meta name="author" content="Your Name" /> | |
| <meta name="robots" content="index, follow" /> | |
| <!-- Canonical URL --> | |
| <link rel="canonical" href="https://example.com/" /> | |
| <!-- Inline SVG favicon: fully standalone, no external favicon file needed --> | |
| <link | |
| rel="icon" | |
| type="image/svg+xml" | |
| href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%230b1224'/%3E%3Cpath d='M18 39c7-15 21-15 28 0' fill='none' stroke='%233dd5f3' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='25' r='4' fill='white'/%3E%3Ccircle cx='40' cy='25' r='4' fill='white'/%3E%3Cpath d='M22 46h20' stroke='white' stroke-width='4' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E" | |
| /> | |
| <!-- Theme and mobile metadata --> | |
| <meta name="theme-color" content="#0b1224" /> | |
| <meta name="color-scheme" content="dark light" /> | |
| <meta name="application-name" content="Hello World App" /> | |
| <meta name="apple-mobile-web-app-title" content="Hello World App" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <!-- Open Graph metadata --> | |
| <meta property="og:type" content="website" /> | |
| <meta property="og:site_name" content="Hello World App" /> | |
| <meta property="og:title" content="Hello World - React + Tailwind" /> | |
| <meta | |
| property="og:description" | |
| content="A standalone Hello World app built with React, Tailwind CSS, Framer Motion, and Lucide React." | |
| /> | |
| <meta property="og:url" content="https://example.com/" /> | |
| <meta | |
| property="og:image" | |
| content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&h=630&q=80" | |
| /> | |
| <meta property="og:image:alt" content="Laptop showing code on a desk" /> | |
| <meta property="og:image:width" content="1200" /> | |
| <meta property="og:image:height" content="630" /> | |
| <meta property="og:locale" content="en_US" /> | |
| <!-- Twitter/X card metadata --> | |
| <meta name="twitter:card" content="summary_large_image" /> | |
| <meta name="twitter:title" content="Hello World - React + Tailwind" /> | |
| <meta | |
| name="twitter:description" | |
| content="A standalone Hello World app built with React, Tailwind CSS, Framer Motion, and Lucide React." | |
| /> | |
| <meta | |
| name="twitter:image" | |
| content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&h=630&q=80" | |
| /> | |
| <meta name="twitter:image:alt" content="Laptop showing code on a desk" /> | |
| <!-- Optional: set these if you have Twitter/X handles --> | |
| <meta name="twitter:site" content="@yourhandle" /> | |
| <meta name="twitter:creator" content="@yourhandle" /> | |
| <!-- Tailwind Play CDN: quick dev only, not for production --> | |
| <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | |
| <!-- Babel standalone to compile JSX in-browser: dev only --> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <!-- Import map: all bare imports resolve from here --> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react": "https://esm.sh/react@18.2.0?dev", | |
| "react-dom": "https://esm.sh/react-dom@18.2.0?dev", | |
| "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev", | |
| "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime?dev", | |
| "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime?dev", | |
| "framer-motion": "https://esm.sh/framer-motion@12.26.0?dev&external=react,react-dom", | |
| "lucide-react": "https://esm.sh/lucide-react@0.268.0?dev&external=react", | |
| "clsx": "https://esm.sh/clsx@2.1.0?dev", | |
| "tailwind-merge": "https://esm.sh/tailwind-merge@2.5.2?dev" | |
| } | |
| } | |
| </script> | |
| <style type="text/tailwindcss"> | |
| @theme { | |
| --color-ink: #0b1224; | |
| --color-brand: #3dd5f3; | |
| } | |
| @layer base { | |
| body { | |
| @apply antialiased; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-ink text-white"> | |
| <div id="app"></div> | |
| <script type="text/babel" data-type="module" data-presets="react"> | |
| import React from 'react'; | |
| import { createRoot } from 'react-dom/client'; | |
| import { motion } from 'framer-motion'; | |
| import { Sparkles } from 'lucide-react'; | |
| import clsx from 'clsx'; | |
| import { twMerge } from 'tailwind-merge'; | |
| const cn = (...args) => twMerge(clsx(args)); | |
| const App = () => { | |
| return ( | |
| <main | |
| className={cn( | |
| 'flex min-h-screen items-center justify-center px-6', | |
| 'bg-gradient-to-br from-ink via-slate-900 to-cyan-950', | |
| )} | |
| > | |
| <motion.div | |
| initial={{ opacity: 0, y: 16, scale: 0.98 }} | |
| animate={{ opacity: 1, y: 0, scale: 1 }} | |
| transition={{ duration: 0.5, ease: 'easeOut' }} | |
| className="rounded-3xl border border-white/15 bg-white/10 px-8 py-6 text-center shadow-2xl backdrop-blur-xl" | |
| > | |
| <div className="mb-4 inline-flex rounded-full bg-white/10 p-3 text-brand"> | |
| <Sparkles className="h-6 w-6" /> | |
| </div> | |
| <h1 className="text-4xl font-semibold tracking-tight"> | |
| Hello World | |
| </h1> | |
| <p className="mt-3 text-sm text-white/70"> | |
| React + Tailwind + Framer Motion + Lucide | |
| </p> | |
| </motion.div> | |
| </main> | |
| ); | |
| }; | |
| const rootElement = document.getElementById('app'); | |
| const root = createRoot(rootElement); | |
| root.render(<App />); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment