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 v3.4. It is responsive. similar terms for this example is Transitions

Hero Animation

Author Vikas Kushwah

Tailwind v3.4 2.7k 1

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.3k
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.

Ayyamperumal S

1 year ago

2.7k
Creative Hero Section

Ijila Itunu

1 year ago

2.1k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Bonimater

1 year ago

1.3k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
chair
by salvator

Baraka Salvator

1 year ago

1.5k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

SAI BENDE

1 year ago

1.6k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

711
use-scroll-effect
use-scroll-effect

Omer fils ELENGA

9 months ago

979
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Nicole Shalom

1 year ago

1.7k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Hezron Okoko

2 years ago

3.7k