Quantcast
Channel: Tutorials & Guides - Cruip
Browsing latest articles
Browse All 25 View Live

Image may be NSFW.
Clik here to view.

Linear, Radial and Conic Gradients with Tailwind CSS

Live DemoDownload Tailwind CSS offers default utility classes to create linear gradients quickly and easily, but not for radial or conic gradients. In this quick guide, we’ll see how to create all 3...

View Article


Image may be NSFW.
Clik here to view.

Blur Reveal Effect with Framer Motion and Tailwind CSS

Live Demo Download In this code snippet, we’ve created a cool blur reveal effect for text and buttons. We got the idea from Linear, a project we admire for its attention to detail in design and...

View Article


Image may be NSFW.
Clik here to view.

Active Link Animation with Tailwind CSS and Framer Motion

Live Demo Download When designing a one-page website, it’s often helpful to provide users with a visual indicator of their current location on the page. One elegant way to achieve this is by...

View Article

Image may be NSFW.
Clik here to view.

How to Use calc() in Tailwind CSS

Before Tailwind introduced the ability to create utility classes on-the-fly, managing CSS properties and values not included in their utilities was always a pain. This is the case with the calc()...

View Article

Image may be NSFW.
Clik here to view.

How to Create a True Masonry with Next.js

Live Demo Download In an earlier tutorial, we showed you how to create a masonry layout using Tailwind CSS. However, as mentioned in that article, the result was a “fake masonry” layout because CSS...

View Article


Image may be NSFW.
Clik here to view.

4 Examples of Dropdown Menus with Tailwind CSS and Radix UI

Live Demo Download In this tutorial, we’ll see four different dropdown menu configurations made with Tailwind CSS for styling and Radix UI primitives for functionality. We’ve drawn inspiration from...

View Article

Image may be NSFW.
Clik here to view.

Animate a React Switch Toggle with Framer Motion

Live Demo Download In this quick tutorial, we’ll show you how to create an animated switch toggle React component using Radix UI, Tailwind CSS and Framer Motion. This toggle animation is inspired to...

View Article

Image may be NSFW.
Clik here to view.

Toggle Password Visibility with Tailwind CSS and Next.js

Live Demo Download Today, we’re going to build a simple password field with a toggle button to show or hide the password. This is a common UI element that improves user experience by allowing users to...

View Article


Image may be NSFW.
Clik here to view.

Build a Password Field with Strength Indicator with Next.js

Live Demo Download In this guide, we’ll build a fully accessible password input field providing real-time feedback about password strength using Next.js and Tailwind CSS. The component we’ll create...

View Article


Image may be NSFW.
Clik here to view.

Building a Composable Multiselect React Component

Download When we started working on Origin UI – our extensive collection of copy-and-paste components – we received numerous requests to create a multiple select component, which is typically not...

View Article
Browsing latest articles
Browse All 25 View Live