Redirecting to PayPal

UI Components – Cronos Library

Browse 637 ready-made components from the Cronos UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.

Tailwind Component #241

Portfolio component in Tailwind

Five-Photo Collage Grid with Yellow and Green Accent Blocks

A grid of five photographs showing office workspaces, a person using a smartphone, hands typing on a laptop, a person working by a window, and a group of people standing against a wall. Yellow and dark green square accents overlap the image corners, and the layout is a loose two-row arrangement with no visible text or interactive controls.

Tailwind Component #242

Blog component in Tailwind

Blog Article Card Grid with Header and Read More Links

A light-themed section with a centered eyebrow label, bold heading, and intro paragraph above a mixed grid of article cards, each showing a photo, date, title, excerpt, and teal Read more link. The grid uses one wide card and one tall card in the first row followed by three equal cards in the second row.

Tailwind Component #243

Contact component in Tailwind

Contact Section with Address, Email, and Embedded Map

A light-background contact section with a large bold heading on the left and address and contact details on the right, above a full-width embedded map of New York City. Decorative yellow and dark green blocks frame the map edges.

Tailwind Component #244

Call to action component in Tailwind

Centered Hero with New Feature Badge and Dual CTA Buttons

A centered hero section with a small 'New feature' badge, a large bold headline, supporting paragraph text, and two side-by-side call-to-action buttons. It promotes a feature or demo with a vertical centered stack on a white background.

Tailwind Component #245

How it works component in Tailwind

Split-Screen Feature Section with Photo and Numbered Points

A marketing feature section with a decorative photo of a woman working at a laptop on the left, overlaid with colored blocks, and a bold heading with a 2x2 grid of numbered points on the right. Each point has a number badge, a subheading, and placeholder body text.

Tailwind Component #246

Application component in Tailwind

Mobile App Hero with App Store Badges and Device Mockups

A centered marketing hero promoting a mobile app, with a small 'New feature' badge, a bold two-line headline, supporting text, App Store and Google Play download badges, and three overlapping phone mockups displaying nature and sky wallpapers.

Tailwind Component #247

Features component in Tailwind

Split Feature Section with Heading and 2x2 Icon Feature Grid

A marketing feature section with a yellow badge, large bold heading, and body text on the left, and a two-by-two grid of outlined icons with titles and descriptions on the right. Used to describe product or service features on a light background.

Tailwind Component #248

Cookies component in Tailwind

Cookie Policy Consent Banner with Allow and Decline Buttons

A dark green full-width notice panel with a yellow heading, explanatory cookie policy text, and two buttons for allowing or declining cookies. It is a notification-style consent component placed as a contained block on a white page.

Tailwind Component #249

Modals component in Tailwind

Newsletter Signup Modal with Email Field

A centered white card on a dark overlay prompting users to sign up for a newsletter, containing a bold heading, short supporting text, a single email input, and a yellow Sign Up button. The layout is a vertically stacked, minimal form.

Tailwind Component #250

Logo clouds component in Tailwind

Customer Logo Strip with Slack, Dropbox, Spotify, and Stripe

A horizontal row of four company logos centered on a light gray panel, used as social proof on a marketing page. Decorative teal and yellow squares frame the corners of the section.

Tailwind Component #251

Stats component in Tailwind

Four-column statistics strip with green line icons

A horizontal row of four statistics, each with a green outline icon, a large bold number, and a small gray label (Projects, Clients, Years of experience, Team Members). It is a simple informational stats section with no interactive controls.

Tailwind Component #252

Testimonials component in Tailwind

Split-screen testimonial with portrait, quote, and pager dots

A two-column testimonial section with a framed portrait and decorative colored blocks on the left, and a large quote mark, bold heading, supporting text, and attribution for Danny Bailey, CEO & Founder, on the right. Pagination diamonds below the image suggest a rotating carousel.

Tailwind Component #253

Sign in / Sign up component in Tailwind

Split-Screen Sign-Up Hero with Account Creation Form

A two-column sign-up section with a large bold heading and body copy on the left and a white card on the right containing a 'Create new account' form with email, password fields, a terms checkbox, and a yellow 'Get Started' button. The right card sits over a dark green decorative frame with light accent blocks.

Tailwind Component #254

Content component in Tailwind

Blog article header with breadcrumb, author byline, and hero landscape image

A centered blog article page header showing breadcrumb navigation (Home, Blog, Article), a bold serif-style heading, an author avatar with name and date, and a full-width green hillside photo with decorative colored squares, followed by body paragraphs in a narrow centered column.

Tailwind Component #255

HTTP codes component in Tailwind

404 Error Page with Illustration and Recovery Actions

A centered error state page showing an ERROR 404 badge, a large 'Page not found' heading, supporting text, and two action buttons to return to the homepage or try again. An illustration of two people working with a laptop and code graphic appears on the left, balancing the text block on the right.

Tailwind Component #256

Team component in Tailwind

Team Member Card Grid with Section Heading

A centered section with a small badge label, large heading, and intro paragraph above a two-by-two grid of team member cards. Each card pairs a photo with a green name, bold role title, and gray placeholder bio text.

Tailwind Component #257

FAQ component in Tailwind

Feature Grid with Icons and Lorem Ipsum Heading

A marketing feature section with a small pill badge, a bold centered heading and intro paragraph, followed by a 3-column by 2-row grid of feature items. Each item has a green line icon, a bold subheading, and four bulleted text lines on a white background.

Tailwind Component #258

Stats component in Tailwind

Four-Column Stat Cards with 65% Circular Progress Rings

A horizontal row of four identical stat items, each showing a green circular progress ring at 65%, a bold label reading Stat Example 1, and gray supporting text. The layout is light-themed and minimal, suitable for displaying key metrics in a marketing or dashboard summary.

Tailwind Component #259

Pricing component in Tailwind

Pricing Section with Starter and Premium Plan Cards

A pricing section with a left-aligned heading and body text beside two plan cards, Starter (highlighted in dark green) and Premium (light background). Each card lists features with check icons and a Start Now button for comparing subscription prices.

Tailwind Component #260

Cookies component in Tailwind

Cookie Policy Consent Banner

A full-width cookie consent banner on a dark green background with a heading, explanatory paragraph about cookie use, and Allow and Decline buttons. It presents a consent choice to the user in a horizontal, stacked text layout.

The easiest way to create beautiful websites

The selected plan includes lifetime access to Shuffle Editor.

Lifetime License

Create an account

OR USE EMAIL

VAT included where applicable. Invoices provided.

Why creators choose Shuffle

From idea to beautiful design in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

  • An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
  • Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 4 Argon in one place.
  • 13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
  • Export to the stack you love Next.js, Astro, Laravel, WordPress, Shopify, static HTML and beyond.
“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”
Est. 2019
Helping web builders ship since 2019 7 years of steady development.

Make it yours with AI

Start with this component. Tell AI what to change.

Original
Preview the original component.
Your Version
Available when your generation is complete.
Code
Available when your generation is complete.
Original component

Add images & videos

Upload an asset, then tell AI how to use it.

How it works

Your uploaded file will be added directly to the generated component. After uploading, you can guide the AI on where exactly to use it, e.g. as a logo or as a section image.

© 2026 Shuffle. All rights reserved.