Expand on hover
Buttons
Expand on hoverGradientShrink on clickMulti color beamBorder shineIcon RevealForm
Simple dataMulti stepForm with file uploadDropdown
Single selectMulti selectExtended with infoDrawer
Expand from middleBottom slideTop slideCards
Horizontal ExpandVertical ExpandHover InfoPricing InfoHover Name RevealAccordian
Single OpenMulti OpenList with IconsButtons
Expand on hoverGradientShrink on clickMulti color beamBorder shineIcon RevealForm
Simple dataMulti stepForm with file uploadDropdown
Single selectMulti selectExtended with infoDrawer
Expand from middleBottom slideTop slideCards
Horizontal ExpandVertical ExpandHover InfoPricing InfoHover Name RevealAccordian
Single OpenMulti OpenList with IconsHover on the button to see a subtle scale effect with transition, made with react and tailwind classes.
Hover me
import <ExpandOnHover/> from '@/components/ExpandOnHover.tsx'
1. Create a NextJs project by
npx create-next-app@latest
2. or a ReactJs project using
npm create vite@latest
3. Install and setup tailwindCSS