Home
Anonymous
qweqwe

qweqwe

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

Gradient

Author Anonymous

202

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

Aggressive red gradient

Author:
Mohit Prajapati

3 years ago

9.3k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

7 months ago

1.1k
Border gradient

Author:
Samuel Dawson

3 years ago

16.9k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

9 months ago

739
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

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

Author:
Алла Телегина

1 year ago

1.3k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

8 months ago

1.5k
Text gradient
very subtle gradients for beautiful headings

Author:
Mr Robot

3 years ago

12.1k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

7 months ago

837
Gradient Background Image

Author:
Kavita Joshi

2 years ago

8.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components