qweqwe

This tailwind example is contributed by Anonymous, on 09-Dec-2025. Component is made with Tailwind v3.4. It is responsive.

Gradient

Author Anonymous

Tailwind v3.4 459 2

Fork Fullscreen

<div id="content" class="data-[expanded=true]:line-clamp-none line-clamp-3 overflow-hidden">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequuntur, dolore nostrum fugit fuga accusamus eum laboriosam consequatur totam aliquid quidem nisi! Facere, nihil amet suscipit ea nulla sit libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid earum dolore, quod fuga quas dignissimos eligendi dolorem, quaerat exercitationem possimus eius veniam nostrum. 
Recusandae minima doloremque deserunt obcaecati quam.</div>

if(content.scrollHeight > content.clientHeight) {
  const btn = document.querySelector('button')
  btn.dataset.shown = true

btn.addEventListener('click', () => {
    content.dataset.expanded = content.dataset.expanded === 'true' ? 'false' : 'true'
  })

}
</script>

Related Examples

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

603
Text gradient
very subtle gradients for beautiful headings

Mr Robot

4 years ago

12.6k
Home page
Home page для ПО, страница для входа в приложение.

Alla Telegina

1 year ago

1.8k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

SHARIFUL ISLAM

1 year ago

2.3k
Frorest Green Gradient

Mohit Prajapati

3 years ago

13.3k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Md. Tofayel islam

2 years ago

4.9k
Underline Gradient
underlined gradient using background color

Nikolai

2 years ago

3.4k
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Anonymous

2 years ago

28.4k
Text with gradient underline
Gradient Underline Text. Decorate your text with a gradient underline for a modern touch.

Anonymous

2 years ago

11.6k
Text Animation

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

1 year ago

1.8k
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.5k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

KULDEEP

1 year ago

1.4k