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

520

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

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

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

1 year ago

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

4 months ago

871
Creative Hero Section

Author:
Ijila Itunu

1 month ago

440
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 weeks ago

136
Modern page
hero page by salvator

Author:
Baraka Salvator

3 weeks ago

343
chair
by salvator

Author:
Baraka Salvator

3 weeks ago

174
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

3 weeks ago

115
Elevated Buton
On hover merge shadow

Author:
Anonymous

9 months ago

1.5k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

11 months ago

2.1k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

3 weeks ago

137
Hero simple
hero design simple

Author:
QQ-VVN

1 month ago

177

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components