Tutorials & Guides

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.

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.

A dropdown menu is a popular web element that contains all the second-level information for a specific category. At Cruip, we have developed several of them in our templates (e.g., check out this simple website template or this SaaS website template).

Dark layouts have become increasingly popular in interface designs, and we at Cruip are proud to have embraced this trend from the beginning.

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.

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.

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 […]

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.

In the interface design, an accordion is a UI element that displays two-level information: A title, a summary of the content (always visible), and a description, generally reachable via action (click, tap, etc.).

There is no doubt that one of the most complex components to design is the pricing tabs, as it constantly evolves (based on the characteristics and functionalities of the product) and requires to be continuously tested to ensure maximum conversions.

In this guide we’ll show you how to customize the fonts of Tailwind CSS templates built with Next.js. Step by step, we’ll walk you through font management and show you how to create custom versions of the templates that will make them truly one-of-a-kind.

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.

In this second part of our article series, we will show you how to use the code from our first tutorial (creating animated and accessible tabs with Alpine.js) to build a reusable component for React and Next.js.

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 […]

In this tutorial, we will walk you through a simple technique to make your post layouts more dynamic and visually appealing to your readers.

A vertical timeline is an intelligent way to display a flow of information that branches out from top to bottom and involves some form of content connection (e.g., temporal, semantic, etc.).

Welcome to the third and final part of our series on How to Build a Fancy Testimonial Slider with Tailwind CSS! This post will guide you through the development of a Vue and Tailwind CSS-based fancy testimonial slider featuring comprehensive TypeScript compatibility.

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.

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.

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.

In this tutorial, we will utilize the power of HTML canvas to create a mesmerizing particle animation resembling a magnificent galaxy of stars. We will delve into the development process behind Stellar, our latest landing page template built with Tailwind CSS.

Welcome to the third and final part of our series on How to Create a Pricing Table with a Monthly/Yearly Toggle Switch in Tailwind CSS. As for the previous (and upcoming) series, our objective is to provide step-by-step instructions for building different Tailwind CSS components in HTML, React (with Next.js), and Vue.

Welcome to the second series of How to Create a Pricing Table with a Monthly/Yearly Toggle Switch in Tailwind CSS! In the previous post, we covered the basics of building this essential component with Tailwind CSS and Alpine.js. Now, we’re taking it a step further and exploring how to build it in Next.js.

The pricing table is without doubt one of the most important components of any landing page, website, or app. It’s that small portion of your product where all the efforts to reach, persuade, and ultimately acquire your users come to fruition, allowing you to transform prospects into long-time loyal customers.

Welcome to the third and final part of our series on How to Build a Video Modal Component! In this tutorial, we will create a fully-functional video modal component using Vue and Tailwind CSS, complete with TypeScript support.

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.

Modal video components are increasingly used in modern web design because they allow for quickly watching a video without leaving the page and focusing on the content without too many distractions.