✨ Get all templates and new upcoming releases for just $89. Limited time offer ✨

Tutorials & Guides

Get the most out of our Tailwind CSS templates with easy-to-follow tutorials, guides, and actionable tips & tricks.

How to Create a Sticky On Scroll Effect with JavaScript

A sticky scroll effect is a quite popular animation used to show related content that overlaps without having to scroll down the page. In simpler words, it lets the user “access” multiple pieces of information while staying in the same position on a page.

How to Make an Animated Number Counter with Tailwind CSS

An animated counter is a particular type of effect applied to numeric elements to give them dynamism. From a UX perspective, this effect is recommended for drawing the user’s attention to important data or statistics, while It’s not advised if the information is not particularly relevant as the animation requires some time to load.

Creating a CSS-only Card Slider with Tailwind CSS

A card slider is a clever component that displays multiple layers of information. What makes this element unique is the ability to showcase an extensive amount of content in a limited space, and make the information accessible in a single click.

Generate Dynamic Open Graph and Twitter Images in Next.js

In this tutorial, we’ll see how to create dynamic Open Graph and Twitter images with Next.js. This technique allows us to generate personalized previews for our articles when shared on social media platforms, enhancing engagement with your audience.

Create an Infinite Horizontal Scroll Animation with Tailwind CSS

In this tutorial, we will show you how to create a cool infinite horizontal animation using only CSS. This effect can be used to display a variety of things, and for this post, we’ll focus on building a logo carousel that smoothly scrolls from right to left using Tailwind CSS classes. The best part is […]

Creating a Sliding Text Animation with Tailwind CSS

In this tutorial, we will learn how to create a sliding text animation using only Tailwind CSS. This effect is especially helpful when you want to alternate multiple words in a sentence (similar to a carousel) and keep the overall density of text compact.

Using Tailwind CSS and Vue to Create Animated and Accessible Tabs

Here we are to the third and final part of our series on Using Tailwind CSS and to Create Animated and Accessible Tabs. If you’ve read the first and second parts, you’re already familiar with the most typical use cases for tabs and how we at Cruip are big fans of this component for displaying multiple kinds of information.

Using Tailwind CSS and Alpine.js to Create Animated and Accessible Tabs

Tabs coordinate a variety of use cases and tasks in the interface design. You can see them in action for displaying multiple contents compared to each other or for highlighting the difference between various elements and information in a particular section. We use tabs to group under a specific umbrella 1+ elements that are connected […]

How to Build a Fancy Testimonial Slider with Tailwind CSS and Next.js

Welcome to the second part of the series of How to Build a Fancy Testimonial Slider with Tailwind CSS! In the previous tutorial, we learned how to create a testimonial slider using Alpine.js. Now, get ready to take your skills to the next level, as we will build a powerful Next.js component that achieves the same stunning result.

How to Build a Fancy Testimonial Slider with Tailwind CSS and Alpine.js

Having testimonials on your landing page or website can be an excellent way to gain credibility and trust from potential customers. So, in this tutorial we will walk you through creating a fancy testimonial slider with Tailwind CSS, and similar to the previous tutorials, we will divide the guide into three parts: using Alpine.js, Next.js and Vue.

How to Create a Spotlight Card Hover Effect with Tailwind CSS

Welcome to this tutorial where we’ll take you on a journey to create an eye-catching spotlight card hover effect using Tailwind CSS. If you’re new to this trending effect, we recommend checking out the live demo or our Dark Next.js landing page template called Stellar.

How to Build a Modal Video Component with Tailwind CSS and Next.js

Welcome to the second part of the series of How to Build a Video Modal Component with Tailwind CSS! In the previous part, we learned how to create a modal video component using Tailwind CSS and Alpine.js. In this article, we will level up the game and show you how to create a reusable component for Next.js using TypeScript.