UI Design Inspiration with Code – Hero, Pricing, Footer & More

Website and UI design inspiration with working code: hero sections, pricing pages, footers, navbars, 404 pages, sliders and 3D designs in React and Tailwind CSS.

404 page design ideas

Looking for 404 page design inspiration? Each 404 page below is a live, working design rather than a static mockup. Preview the motion, then copy the HTML structure, CSS and React code into your own site.

All 404 Pages

Pricing page design inspiration

Browsing pricing page designs on Dribbble or Pinterest? These pricing section and pricing table designs are already built. See how the tiers, toggles and hover states move, then take the code instead of rebuilding a mockup from scratch.

All Pricing

Hero section design ideas

Looking for hero section design inspiration for a landing page or portfolio? Every hero here is a real, animated design you can preview in the browser and copy as React code, from 3D and shader heroes to bold typographic layouts.

All Hero Sections

Footer design ideas for websites

Need footer design ideas? These website footers cover simple, corporate, minimal and creative layouts, including reveal and 3D footers. Each design comes with working React and Tailwind code.

All Footers

Navbar designs with code

These navbar designs come with their code. Preview dock menus, capsule navbars and animated headers, then copy the component instead of recreating a design shot by hand.

All Navbars

Login page design with code

Looking for login page design templates? These sign-in and sign-up screens are complete designs with working form layouts, built in React and Tailwind CSS and ready to connect to your auth provider.

All Login & Auth

Preloader animation ideas for websites

These preloader animations are cinematic loading screens for websites. Preview them live and copy the code, instead of exporting a GIF that cannot react to real loading progress.

All Preloaders

Button design ideas for websites

Looking for button design ideas for a website or UI kit? These animated buttons cover glass, gradient, border beam and physics styles, each one a working component with copy-paste code.

All Buttons

Text animation ideas for websites

These text animation effects are made for websites, not video editors. Preview scroll reveals, typewriters and 3D type in the browser, then copy the React code.

All Text Effects

Image slider and carousel design ideas

Looking for image slider design ideas? These carousels and sliders are live designs with shader transitions, coverflow and 3D motion, and each one ships with its React code.

All Sliders

Card UI design ideas

Browse card UI design examples for websites: product, profile, glass and stacked cards. Every card is a working component, so you can check the hover states and copy the code.

All Cards

Reveal animation ideas

These reveal animations uncover images and sections as visitors scroll or move the mouse. Preview each effect live and copy the code into your project.

All Reveal Effects

Gallery design ideas for websites

Looking for gallery layout ideas? These image galleries cover parallax, scroll, spiral and 3D layouts, each a live design with copy-paste React code.

All Galleries

Animated website background ideas

Looking for an animated website background? These shader backgrounds render liquid, gradient, wave and fog effects in real time, and you can drop them behind any section.

All Shaders

3D website design examples

Looking for 3D website design examples? These 3D elements and scenes are built with Three.js and run in the browser, so you can preview them live and add them to your own site.

All 3D / Three.js

Glassmorphism UI design examples

Browse glassmorphism UI designs: glass cards, frosted panels, liquid glass buttons and crystal effects. Each design is a working component with its code.

All Glass

GSAP animation examples

These GSAP animation examples cover scroll-triggered sections, sliders and text effects, already wired into React components you can copy.

All GSAP