Cruip Tutorials made with HTML, Tailwind CSS and Alpine.js

Welcome to the repository of Cruip's guides & tutorials in HTML. Here you will find the code for all the components we have developed and will develop, ready to be integrated into your projects.

If you're new to our articles, we recommend taking a look here: Tailwind CSS Tutorials. If you're new to Cruip's ecosystem, learn more about our Tailwind CSS templates.

Tutorial list

• How to Build a Modal Video with HTML, Tailwind CSS and Alpine.js
• How to Create a Pricing Table with a Monthly/Yearly Toggle in Tailwind CSS
• How to Create a Beautiful Particle Animation with HTML Canvas
• How to Create a Spotlight Card Hover Effect with Tailwind CSS
• How to Build a Fancy Testimonial Slider with Tailwind CSS and Alpine.js
• 3 Examples of Brilliant Vertical Timelines with Tailwind CSS
• Creating Dynamic Blog Layouts with Negative Margins
• Using Tailwind CSS and Alpine.js to Create Animated and Accessible Tabs
• How to Create a Feature Comparison Table with Tailwind CSS
• Building a Simple Animated Accordion Component with Tailwind CSS
• Creating a Sliding Text Animation with Tailwind CSS
• Create an Infinite Horizontal Scroll Animation with Tailwind CSS
• Creating a CSS-only Card Slider with Tailwind CSS
• Build a Hoverable Dropdown Menu with Tailwind CSS and Alpine.js
• How to Make an Animated Number Counter with Tailwind CSS
• How to Create a Sticky On Scroll Effect with JavaScript
• Create an Animated Gradient Text with Tailwind CSS
• How to Make a Stunning CTA Animation with Tailwind CSS
• Create a Stacking Cards Waterfall Effect with Tailwind and Alpine.js
• Building an Expandable Header with Tailwind CSS and Alpine.js
• Create a Gradient Text Reveal on Scroll with Tailwind CSS
• Changing Background Color on Scroll with JavaScript
• Making a Text Scramble Animation with JavaScript
• Creating a Pricing Table with Range Slider using Tailwind CSS and Alpine.js
• Creating a Tooltip-like Testimonial with Tailwind and Alpine.js
• Create a Carousel with Progress Indicators using Tailwind and Alpine.js
• Make a Stunning Card Hover Animations with Tailwind CSS
• Hamburger Menu Button Animations with Tailwind CSS
• OTP Form Example Made with Tailwind CSS and JavaScript
• Stick Elements at the Bottom of Cards with Equal Heights
• Building a Mobile-Friendly Pricing Table with Tailwind CSS
• Tailwind CSS Nth-Child Selector Cheat Sheet
• Auto-Growing Textarea with Tailwind CSS
• Animated Gradient Borders with Tailwind CSS
• Build a WYSIWYG Editor with Tailwind CSS
• Create a Table with a Sticky Column using Tailwind CSS
• Button Shine Effect on Hover with Tailwind CSS
• Masonry Layouts with Tailwind CSS
• Create an Image Accordion with Tailwind
• Linear, Radial and Conic Gradients with Tailwind CSS

Terms of use

We want you to get the most out of these resources, so here's what you need to know:

1. Usage Freedom: You are free to use these tutorials and demos for any purpose. Whether it's for personal projects, educational endeavors, or even commercial purposes, go ahead and make the most of them!

2. Respect Our Work: While you're free to use the tutorials and demos as-is, you are not allowed to redistribute them or create derivative works with the aim of making money. Let's keep it fair and respect each other's efforts.

3. Attribute and Share the Love: We kindly ask that you provide attribution when you use our work. It's easy, just retain any copyright notices or credits you find in the code. It helps spread the word about our project and allows others to discover these valuable resources too.

4. Be Creative: We love to see what you can do with our work! Feel free to create remixes or derivative works for non-commercial purposes. Play around, experiment, and have fun, as long as you stick to the same license terms.

That's it! We believe in empowering the community with knowledge and resources, and we hope these tutorials and demos help you on your journey to creating fantastic projects with Tailwind CSS.

If you have any questions or just want to say hello, don't hesitate to reach out to us at Cruip.com.

Happy coding! 🚀