Snippet

Reference with minimal setup

🐶 😺 🦊 🐢 🦔 🐣

🍡 The "3-tier" Layout

Main content will stretch to fill the space. This ensures that there is no layout shift if main content is too small and keeping the footer at the bottom.

ReactTailwind CSS

👈 Side Navigation

Navigation that is always visible on the left side of the page.

ReactTailwind CSS

🫠 Center that <div>

The classic "I can't center this div" problem solved with flex.

ReactTailwind CSS

📍 Sticky Navigation

A navigation bar that stays at the top of the page when scrolling.

ReactTailwind CSS

🥃 Glass Effect Navigation

Blurred glass like effect.

ReactTailwind CSS

🌀 Loading Spinner

Spin and spin and spin.

ReactTailwind CSS

▶️ Button with Spinner

A button that shows a spinner animation when clicked.

ReactTailwind CSS

💀 Skeleton

Loading animation using pulse.

ReactTailwind CSS

🏅 Badge

A small, colored label that can be used to indicate a status or a category.

ReactTailwind CSS

👤 Avatar

There are many avatar placeholders out there - this uses DiceBear.

ReactTailwind CSS

🔁 Toggle Button #1

Toggle button built with `classnames` package.

ReactTailwind CSS

🔁 Toggle Button #2

Toggle button built with hidden checkbox. `sr-only` will hide an element visually and `peer` is used to style an element based on the descendants of a sibling element.

ReactTailwind CSS

🎱 Dotted Background

FigJam like background style.

ReactTailwind CSS

🎈 Popover

This uses native popover. See MDN for more details.

ReactTailwind CSS

🍔 Hamburger Menu

This uses label and checkbox without any JavaScript.

ReactTailwind CSS

© 2025