Team Cards with Grayscale to Color Photo Hover
Pure CSS team section where grayscale portraits turn to full color, zoom in slightly and reveal social links on hover or keyboard focus.
Tag: card
Components tagged with "card".
45 component(s)
Pinterest-Style Pin Board
Bootstrap 5 masonry pin board with photo pins, topic filter chips, save buttons and a live saved counter.
Usage-Based Pricing Slider
Tailwind CSS pricing card with a range slider that updates the plan, monthly price and cost per 1,000 requests as usage changes.
Card Carousel with Peek of Next Slide
Swipeable Tailwind CSS photo card carousel with scroll snap, a peeking next card, arrow buttons, dots and keyboard support.
Event Card with Photo and Date Badge
Pure CSS event cards with a cover photo, ticket-stub date badge, category chip, time and venue details, price and a ticket button.
Business Card Style Contact Card
Bootstrap 5 digital business card with portrait, role, tap-to-call contact links, copy buttons, a QR code and a downloadable vCard.
Event Invitation Card with Photo and RSVP
Bootstrap 5 event invitation card with a header photo, date chip, event details grid, RSVP buttons, calendar and directions links.
Kanban Board with Bootstrap Cards
Bootstrap 5 kanban board with four columns, labelled task cards, drag and drop, a keyboard-friendly move menu, live counts and inline add-card forms.
Real Estate Agency Landing Page with Property Photos
Bootstrap 5 real estate landing page with a photo hero, property search that filters listing cards, saved homes, agent contacts and a valuation form.
Agency Case Study Grid with Images
Dark Tailwind CSS portfolio grid of agency case studies with project photos, client, year, key results and service filter buttons.
User Hover Card Popover with Photo
Bootstrap 5 popover hover card showing a user photo, cover band, bio, follower stats and a working follow button.
Weather Forecast with Weekly View
Tailwind CSS weather widget with current conditions, a selectable 7-day forecast with temperature range bars, and a °C/°F switch.
World Clock Widget
Tailwind CSS world clock with live digital times for six cities, day and night cards, time differences, a 12h/24h switch and the Intl API.
Shimmer Skeleton
Dark pure CSS skeleton screen for a profile card, article and comment list, with one synchronized shimmer sweep across every placeholder.
Glassmorphism Card
Frosted glass profile card in Tailwind CSS with backdrop blur, a light reflection and a follow button over colorful animated gradient blobs.
Music Player Card
Dark music player card with a spinning vinyl cover, seek bar, play, skip, shuffle and repeat controls, volume slider and a clickable playlist.
Weather Card with Forecast
Sky-blue weather card with a CSS-drawn sun and clouds, current conditions, quick stats, a 5-day forecast with range bars and a Celsius/Fahrenheit switch.
Pricing Cards with Hover
Three pure CSS pricing cards with hover lift and a featured plan that has a spinning conic-gradient border, glow and Most popular badge.
Product Card with Quick Actions
Responsive product card grid where hover or focus reveals wishlist, quick view and add-to-cart actions, with star ratings and a native quick view dialog.
Social Share Buttons
Pure CSS social share card with brand-colored X, Facebook and LinkedIn buttons, a copy-link field with clipboard feedback and a native share fallback.
Neon Glow Profile Card
Dark profile card with an animated neon conic-gradient border, soft glow, stats, skill tags and a Follow toggle, built with pure CSS and vanilla JS.
Scroll-Snap Testimonial Slider
Horizontally scrolling testimonial cards using CSS scroll snap, with star ratings, avatars and accessible previous and next buttons.
Pricing Cards with Billing Toggle
Bootstrap 5 pricing cards with a Monthly / Annual segmented switch that updates prices, savings and yearly totals, plus a highlighted featured plan.
Social Media Post Card
Dark Bootstrap 5 social post card with photo, double-tap like, save, native share with copy-link fallback and an inline comment thread.