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

1.8k

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:
$@(\/)(\/)¥

1 year ago

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

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

1 year ago

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

10 months ago

1.8k
Creative Hero Section

Author:
Ijila Itunu

8 months ago

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

7 months ago

591
Modern page
hero page by salvator

Author:
Baraka Salvator

7 months ago

1.2k
chair
by salvator

Author:
Baraka Salvator

7 months ago

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

Author:
SAI BENDE

5 months ago

608
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
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.

Author:
Ayyamperumal S

1 week ago

23
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

2 days ago

27
Hero

Author:
ABDO-SY

10 months ago

1.8k
Hero template

Author:
Leon Bachmann

3 years ago

13.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components