Tailwind CSS Section Components

Dev Design Library indexes 716 Tailwind CSS section components from 40 open-source UI libraries, with the most coming from Watermelon UI, Oxbow UI, cnblocks, sv-efferd and FLX UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes.

Showing 120 of 716, a mix from every library. Open a library to see all of its components.

• FooterdaisyUI · CSS (Tailwind)
• Bento GridMagic UI · ReactBento grid is a layout used to showcase the features of a product in a simple and elegant way.
• Feature CarouselCult UI · ReactFeature carousel component with smooth transitions and customizable layouts
• M
  Magnetkit WebLibraries.dev · ReactLanding page of a magnetic UI kit: particles and elements pulled toward the cursor.
• Background PathsKokonut UI · ReactA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
• FAQRare UI · ReactAn FAQ styled as a message thread, with each answer sent as a reply bubble.
• Animated TestimonialsSpectrum UI · Reactcomponent for the Animated Testimonials
• Logos CarouselSpell UI · ReactAnimated carousel component that cycles through sets of logos with staggered animations.
• Agent Bento GridVengeance UI · ReactMulti-agent workspace grid layout
• Cta SectionLaunch UI · React
• Section RailPanel UI · React NativeFloating section navigator for a long screen.
• Accordion-03 - Numbered FAQShadcn Space · ReactFAQ accordion with numbered items, background fill on open, and +/- toggle
• Fisheye FaqPixel Perfect · ReactA vertical FAQ list with macOS-Dock fisheye magnification — rows scale by their distance from the cursor and the…
• BrandsOpenSourceUI · React
• AccordionOSuselayouts · ReactInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay…
• LandingBoardUI · React
• Dither Prism HeroComponentry · ReactStunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
• Feature Section 01Tremor Blocks · React
• Comparator Onecnblocks · SvelteBefore/after image comparison slider block
• Bento GridAnimations (Svelte) · SvelteA flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.
• Cloud OrbitBadtz UI · ReactThis component creates a dynamic and interactive experience, where each icon orbits in a fluid motion. Fully…
• FooterObsidianUI · React
• Team SectionGreatUI · React
• Cta 01Oxbow UI · AstroCentered CTA with logo, image and text
• CTANexvyn UI · ReactCall to action primitives: Cta section, CtaAction links and the sliding CtaActionIcon.
• Template LandingShark UI · React
• Stretchy Footer23rd.dev · ReactDia-style rubber overscroll: rainbow aurora stretches up past the bottom, then snaps back.
• Bento 01Watermelon UI · React
• Blog Onesv-efferd · SvelteA vertical editorial list with full-width dividers and compact summaries.
• Changelog StackUI Lab · ReactFiles each release card behind the stack like a hand riffling index cards.
• Buy Me CoffeeCojeev UI · ReactA support poster reveals an inviting cup illustration and a real caller destination.
• FAQFLX UI · ReactA titled question-and-answer list.
• Newsletter sign-upVelora UI · ReactNewsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note.
• Interactive Grid HeroSpaceUI · ReactInteractive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius…
• Interactive Grid HeroSkecher UI · ReactA full-page field of square cells that locally soften and round around a fine pointer.
• Bento 03D2Studio UI · ReactA flat 3×2 feature grid on thin edge-masked rules — no cards, no fills. Each cell pairs a recessed keycap icon tile…
• Glass Bento GridOpaline · ReactFeature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
• Integration VisualFibo · ReactA hub and the tools wired into it, with pulses along the routes.
• Airbnb ReviewsReactFrame · ReactA guest-review carousel with the Airbnb Bélo mark, aggregate rating header and CTA, above a draggable autoplaying grid…
• Features Section Demo 1Aceternity UI · ReactSimple with card gradient
• HerodaisyUI · CSS (Tailwind)
• Hero Video DialogMagic UI · ReactA hero video dialog component.
• Feature Sticky SectionCult UI · ReactSticky section with controllable panels and scroll behavior
• Widget GridKokonut UI · ReactDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
• Animated Wave FooterSpectrum UI · Reactcomponent for the Animated Wave Footer
• Animated FooterVengeance UI · ReactReveal-on-scroll footer with cursor-lit ASCII art and parallax
• Faq SectionLaunch UI · React
• Accordion-07 - Motion ServicesShadcn Space · ReactAnimated accordion with a number bubble, sliding title shift, and an expanding bottom line on hover and active states…
• Footer RevealPixel Perfect · ReactA scroll-driven footer reveal — the footer sits pinned in place while the content above slides up to uncover it. Pure…
• Team Member Profile GridOpenSourceUI · React
• Feature Carouseluselayouts · ReactA smooth carousel for showcasing product features.
• Gradient Hero 01Componentry · ReactA simple centered hero with a warm cinematic gradient, compact badge, short copy, and two actions.
• Feature Section 02Tremor Blocks · React
• Contact Onecnblocks · SvelteContact form with input fields and submit button
• Hero Video DialogAnimations (Svelte) · SvelteA video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
• Split ShowcaseObsidianUI · React
• Cta 02Oxbow UI · AstroCentered CTA with logo and text
• CTA CenteredNexvyn UI · ReactA centered call to action with eyebrow, heading, supporting text and two actions.
• Tangle Footer23rd.dev · ReactA footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.
• Bento 02Watermelon UI · React
• Blog Threesv-efferd · SvelteA card-based blog grid with media thumbnails and richer reading metadata.
• Footer SignatureUI Lab · ReactSigns the footer by hand when it scrolls into view, slowing through every loop.
• Bento grids 01FLX UI · ReactThree-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.
• Split CTA with product visualVelora UI · ReactTwo-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
• Bento 04D2Studio UI · ReactA four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2…
• Cinematic Stacked GalleryReactFrame · ReactA fullscreen hero gallery where inactive slides collapse into a stacked deck of thumbnails; clicking one crossfades it…
• Features Section Demo 2Aceternity UI · ReactSimple with hover effects
• Hero Color PanelCult UI · ReactSplit-layout hero section with responsive ColorPanels shader visuals, CTA, and tech stack badges
• Shape HeroKokonut UI · ReactA landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
• Ask Docs FooterSpectrum UI · ReactA docs question box that streams a cited answer, over link columns.
• Aurora HeroVengeance UI · ReactFluted glass dynamic hero with interactive switch
• FooterLaunch UI · React
• Bento Grid 01 - Bento Grid SectionShadcn Space · ReactA visually rich bento grid that brings the world closer—highlighting stunning locations, cultural moments, and…
• Hero Cover RevealPixel Perfect · ReactA scroll-driven hero cover reveal — the hero pins in place while the next section slides up and covers it, scrubbed by…
• Focus Testimonialsuselayouts · ReactInteractive testimonial section with hover-based focus effects, animated author tooltips, and expandable testimonials.
• Hero GeometricComponentry · ReactGeometric shapes and patterns for hero sections.
• Feature Section 03Tremor Blocks · React
• Contact Twocnblocks · SvelteTwo-column contact section with form and info
• Spell Logo CarouselAnimations (Svelte) · Svelte
• Cta 03Oxbow UI · AstroCentered CTA with download buttons
• CTA SplitNexvyn UI · ReactA two column call to action with a phone showing your app screen.
• Bento 1Watermelon UI · React
• Blog Twosv-efferd · SvelteA structured blog grid with metadata rows and filler cells for balance.
• Logo OrbitUI Lab · ReactLogos orbit a heading on tilted rings, passing behind it, and brake to a stop when you point.
• Bento grids 02FLX UI · ReactA row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short…
• Vortex CTA bandVelora UI · ReactDark rounded call-to-action band over a brand-tinted particle vortex, with two actions and fine print.
• Block 01D2Studio UI · ReactAI feature showcase with smart summarizer, creative prompts, document analysis and engagement metrics cards.
• eBay ReviewsReactFrame · ReactA seller-feedback carousel with the eBay wordmark, aggregate rating header and CTA, above a draggable autoplaying grid…
• Features Section Demo 3Aceternity UI · React
• Hero DitheringCult UI · ReactSplit-layout hero section with responsive dithering shader visuals, CTA, and tech stack badges
• Banner TiersSpectrum UI · ReactA brutalist plan table whose featured column wears a blue banner on top.
• Faq AccordionVengeance UI · ReactAnimated expanding FAQ list
• Footer SectionLaunch UI · React
• Calendar 15 - With PricingShadcn Space · ReactCalendar component
• Liquid Indexuselayouts · ReactA feature list whose hover badge is a WebGL liquid gradient that tracks the row.
• Newsletter BookshelfComponentry · ReactA tactile 3D newsletter archive with hover lift, camera browsing, centered covers, and automatic drag-adjustable…
• Feature Section 04Tremor Blocks · React
• Content Fivecnblocks · SvelteContent block with image and text in grid layout
• Cta 04Oxbow UI · AstroCentered CTA with grid banner
• FAQ AccordionNexvyn UI · ReactA two column FAQ accordion with a contact line.
• Bento 10Watermelon UI · React
• Contact Fivesv-efferd · SvelteA bordered contact card pairing essential details with a reusable message form.
• Pricing CalculatorUI Lab · ReactItemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
• Bento grids 03FLX UI · ReactA product grid with a tall featured item in the center, four smaller items around it, category badges, prices and names.
• Centered FAQ accordionVelora UI · ReactCentered heading over an accordion of eight questions, closed by a contact row.
• Brand ShowcaseD2Studio UI · ReactA logo wall that rotates instead of scrolling. A marquee asks the eye to track a moving target; this holds a page of…
• 404 Page SectionReactFrame · ReactA centered "page not found" section: a big glitching error code, heading, description and one or two pill buttons…
• Hero HighlightAceternity UI · React
• Hero HeatmapCult UI · ReactSplit-layout hero section with responsive Heatmap shader visuals, CTA, and tech stack badges
• Blueprint TiersSpectrum UI · ReactA Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent.
• Pricing SectionVengeance UI · ReactThree-tier pricing with a sliding billing switch, rolling prices, and accent-lit cards
• Hero SectionLaunch UI · React
• Collapsible 01 - Release ChangelogShadcn Space · ReactAn expandable release changelog with per-version collapsible panels, typed badge labels (Feature, Fix, Breaking), and…
• Pricing 01Componentry · ReactThree tactile pricing cards with revealed hover notes, clear feature lists, and a highlighted popular plan.
• Feature Section 05Tremor Blocks · React
• Content Fourcnblocks · SvelteContent section with feature highlights
• Cta 07Oxbow UI · AstroSplit CTA with custom avatars
• FAQ GroupedNexvyn UI · ReactA two column FAQ grouped by topic, one hairline list per group.
• Bento 11Watermelon UI · React
• Contact Foursv-efferd · SvelteA split contact form with direct support details and a structured inquiry panel.

Libraries with Tailwind CSS section components

• Watermelon UI
• Oxbow UI
• cnblocks
• sv-efferd
• FLX UI

Related categories

• Section Components
• React Section Components
• Svelte Section Components
• Animated Section Components
• shadcn/ui Section Components
• Tailwind CSS Hero Components
• Tailwind CSS Feature Section Components
• Tailwind CSS Footer Components
• Tailwind CSS Logo Cloud Components
• Tailwind CSS CTA Section Components
• Tailwind CSS FAQ Section Components
• Tailwind CSS Gallery Section Components
• Tailwind CSS Stats Section Components
• Tailwind CSS Contact Section Components
• Tailwind CSS Blog Section Components
• Tailwind CSS Newsletter Section Components