Home
Vikas Kushwah
Smooth Slide-in Animation for Text in Tailwind CSS

Smooth Slide-in Animation for Text in Tailwind CSS

Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

This tailwind example is contributed by Vikas Kushwah, on 25-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Hero Animation

Author Vikas Kushwah

195

Fork Fullscreen

<section class="bg-blue-400 w-full pt-20 flex flex-col justify-center items-center text-white py-10">
          
        <div class="animate-slidein opacity-0 [--slidein-delay:300ms]">
          <div class="flex items-center gap-3 border-2 border-blue-50 bg-slate-500 px-4 py-1 rounded-xl">Introducing Linear Asks <FaArrowRight /></div>
        </div>
         
        <h1 class="animate-slidein opacity-0 [--slidein-delay:300ms] text-6xl py-7 font-medium px-20 text-center">
          Linear is a better way
          <br />
          to build products
        </h1>
         
        <p class="animate-slidein opacity-0 [--slidein-delay:500ms] text-xl text-center pb-5">
          Meet the new standard for modern software development.
          <br />
          Streamline issues, sprints, and product roadmaps.
        </p>
         
        <div class="animate-slidein opacity-0 [--slidein-delay:700ms] ...">
          <div class=" ">
            <samp class="px-5 py-2 rounded-xl border-2 border-gray-50 bg-slate-900">Get started</samp> </div>
        </div>
  </section>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

1 year ago

6.7k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

10 months ago

4k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

2 months ago

621
Yoga Coach Hero Section

Author:
Samuel Abera

10 months ago

4.4k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

3 months ago

930
Portfolio Hero Section 5

Author:
Samuel Abera

3 weeks ago

289
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

1 month ago

569
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

17.3k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

4 weeks ago

204
Animated cards

Author:
Prajwal Hallale

2 years ago

25.8k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

11 months ago

3.9k
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components