Frontend.fyi

Public

Pricing table

Pricing table

Private

CSS Grid Carousel

CSS Grid Carousel

Private

Sticky Nav

Sticky Nav

Private

Picture in picture player

Picture in picture player

Public

Pricing table

Pricing table

Private

CSS Grid Carousel

CSS Grid Carousel

Private

Sticky Nav

Sticky Nav

Private

Picture in picture player

Picture in picture player

Public

Recreating the Apple TV Page

Recreating the Apple TV Page

Private

Stipe's Navigation with View Transitions

Stipe's Navigation with View Transitions

Public

Vercel nav

Vercel nav

Private

Rebuilding Linear's Website

Rebuilding Linear's Website

Public

Recreating the Apple TV Page

Recreating the Apple TV Page

Private

Stipe's Navigation with View Transitions

Stipe's Navigation with View Transitions

Public

Vercel nav

Vercel nav

Private

Rebuilding Linear's Website

Rebuilding Linear's Website

Frontend.fyi Playgrounds

Create beautiful frontend demos worth sharing. Part of Frontend.fyi PRO , or €5 / month.

Learn about Frontend.fyi PRO

Unlock Playgrounds

Build, test and share frontend ideas right in your browser.

Choose a plan

Cancel anytime. Playgrounds are also included in PRO. Upgrade later and we credit 100% of your first 3 months and 50% of the rest toward it.

Already a member? Log in

What the community is building

Newest playgrounds

See what the community is building. Fork it and take it to the next level, or like it and show some love.

Create your own from these

Blueprints by Jeroen

Learn by doing! Check out these interactive code examples and create your own playground from any of them.

Learn by building, not watching

Frontend.fyi Playgrounds

Fork our tutorials, remix community creations, or start fresh. No setup — just code, create, and share.

+ Create Playground

Zero to coding in seconds

No config, no waiting. Need a package? One click. Experiment before you lose that brain fart again.

Community

Real experiments from real devs. Find tricks, learn new techniques, and get inspired.

frontend.fyiForkForking blueprint...

Blueprints

Every Frontend.fyi tutorial, ready to fork. No better way to learn, than to tear it apart and rebuild.

Fork & Remix

See something cool? Fork it and take it to the next level. Then inspire the next person.

className="btn"className="flex items-center justify-center px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 focus:ring-2focus:ring-purple-500 focus:ring-offset-2 transition-colors duration-200 font-medium text-sm text-white shadow-mdhover:shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed gap-2 min-w-[120px] max-w-fullinline-flex shrink-0 grow-0 basis-auto self-center place-self-center justify-self-center content-center items-baselinemd:px-6 md:py-3 lg:px-8 sm:text-base md:text-lg xl:text-xl 2xl:text-2xl whitespace-nowrap text-ellipsis select-nonetracking-wide uppercase border-2 border-transparent hover:border-purple-400 backdrop-blur-sm bg-opacity-90 z-10dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-purple-400 motion-safe:transition-all ease-in-out delay-75aria-disabled:opacity-50 group-hover:scale-105 peer-checked:bg-green-500 first:rounded-l-lg last:rounded-r-lgsupports-[backdrop-filter]:bg-purple-600/80 print:hidden motion-reduce:transition-none scroll-mt-16 isolate relativebefore:absolute before:inset-0 before:bg-gradient-to-r before:from-white/10 before:to-transparent before:rounded-lgafter:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1/2 after:h-px after:bg-white/20hover:after:w-full hover:after:transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2focus-visible:outline-purple-500 data-[state=open]:bg-purple-700 data-[state=closed]:bg-purple-600 touch-manipulationwill-change-transform backface-hidden perspective-1000 transform-gpu subpixel-antialiased font-smoothing-antialiased[-webkit-tap-highlight-color:transparent] pointer-events-auto cursor-pointer snap-start snap-always scroll-ml-4scroll-smooth overscroll-contain break-words hyphens-auto leading-tight tracking-tight antialiased proportional-nums"ReactJSVanillaTailwind CSS

Multiple Templates

React or Vanilla? With Tailwind, or you don't have a 80 inch screen? — You choose.

fefyi.dev/k4bnfkn3t6a

Share Anywhere

One unique URL. Drop it in Slack, X, or a PR.

Auto Thumbnails

Beautiful preview images generated automatically. Always looks polished when shared.

Ready to start building?

Get access to Playgrounds and start creating beautiful frontend demos today. Included in PRO or €5 / month.

Learn about Frontend.fyi PRO

Unlock Playgrounds

Build, test and share frontend ideas right in your browser.

Choose a plan

Cancel anytime. Playgrounds are also included in PRO. Upgrade later and we credit 100% of your first 3 months and 50% of the rest toward it.

Already a member? Log in