- Home
-
Radio Button Group for Search Filters
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters
This tailwind example is contributed by Prajwal Hallale, on 12-Dec-2023. Component is made with Tailwind CSS v3. It is responsive.
Author Prajwal Hallale
Related Examples
-
2 years ago17.3k
-
Radio Buttons
Users can click anywhere on the input field to select the radio option
3 years ago16.8k -
3 years ago12.2k
-
3 years ago9k
-
2 years ago10.8k
-
Pricing Plan Selector
radio buttons for selecting a pricing plan
2 years ago9.9k -
Button group with icon
edit, view, and delete buttons group
2 years ago17.3k -
2 years ago10.4k
-
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.
2 days ago39 -
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀
9 months ago1.3k -
2 years ago10k
-
buttons group
some attractive button group on different varients primary, outlined and link button
1 year ago1.5k
Explore components by Tags
Didn't find component you were looking for?
Search from 3000+ components