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

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.9k
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

7 months ago

1.3k
Creative Hero Section

Author:
Ijila Itunu

4 months ago

778
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.

Author:
Bonimater

3 months ago

444
Modern page
hero page by salvator

Author:
Baraka Salvator

3 months ago

738
chair
by salvator

Author:
Baraka Salvator

3 months ago

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

Author:
SAI BENDE

1 month ago

207
Clean hero section

Author:
OmKar Mehta

1 year ago

2.8k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

6 months ago

1.8k
Hero with video background

Author:
Samuel Dawson

2 years ago

16.1k
Hero simple
hero design simple

Author:
QQ-VVN

4 months ago

607

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components