Home
Komal Jain
Exapnd and collapse button for large content without javascript

Exapnd and collapse button for large content without javascript

Forked from> @komal-j/exapnd-and-collaps-button-for-large-content

Truncate and expand on click large content without using JavaScript.

This tailwind example is contributed by Komal Jain, on 17-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Button Widget

Author Komal Jain

Fork Fullscreen

<div class="max-w-md mx-auto bg-white border rounded-lg overflow-hidden mt-12">
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-900">Luxurious Car Seat Cover</h2>
        <img src="https://images.unsplash.com/photo-1606200639236-00a51094e662?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxjYXIlMjBzZWF0fGVufDB8MHx8fDE3MjExOTU5NzR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Luxurious Car Seat Cover" class="w-full h-48 object-cover my-2 rounded">

<input type="checkbox" id="toggle-description" class="hidden">
        <p id="c_description"
            class="mt-2 text-lg text-gray-800 break-words text-medium line-clamp-2 transition-all duration-300 ease-in-out">
            Transform your driving experience with our luxurious car seat cover. Designed with premium quality
            materials,
            this cover provides superior comfort and durability. The breathable fabric ensures maximum airflow, keeping
            you
            cool during long drives. The stylish design enhances the interior of any car, while the easy-to-clean
            surface
            makes maintenance a breeze. Perfect for all seasons, this car seat cover is an essential upgrade for any
            vehicle.
            With a universal fit, it easily installs in minutes. Enjoy the ultimate in driving comfort and style with
            our
            luxurious car seat cover.
        </p>
        <label for="toggle-description" id="toggle-btn" class="mt-2 text-blue-600 rounded-lg hover:text-blue-700 focus:outline-none cursor-pointer">
        </label>
    </div>
</div>

Related Examples

Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

1 year ago

2.2k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

4 months ago

662
Interactive "Morphing" Play/Pause Button

Author:
Anonymous

10 months ago

1.3k
Menu button

Author:
Freja Jensen

2 years ago

16k
Animated button with rotating light beam
light beam rotates around the border

Author:
Anonymous

1 year ago

2.6k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

39.6k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

5 months ago

1.3k
Playstore Button
Download on the play store button

Author:
Arya

3 years ago

14.4k
File Input
File Input

Author:
Aman kumar

1 year ago

2.5k
gradient button

Author:
Akram Khan

1 year ago

1.9k
3D button with hover effect!

Author:
Laurits

2 years ago

17.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components