Browse 122 ready-made Tailwind CSS components from the Asitrastudio UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Tailwind CSS
asitrastudio
Full Shuffle Editor access for just $10
Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.
Get 7-Day PassNew to Shuffle? Try our tools:
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background hero section for an architecture branding agency, with a large two-line headline, a short right-aligned agency description, a top navigation bar with a consultation button, and a row of rounded architectural photographs below a divider.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light hero section for an architecture branding agency, featuring a large centered headline "We create modern architecture" flanked by rounded architectural photographs, a top navigation bar with a outlined consultation button, and a circular rotating-text badge. The layout uses a centered headline stack with decorative image tiles around it and a short right-aligned company description.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered modal dialog titled "Sign up to studio" with Google and Apple social sign-up buttons, an OR divider, and fields for full name, email, and password, followed by a disabled-looking Sign up button and terms text. A close icon sits in the top-right corner.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background blog preview section with a large 'Blog' heading and a 'See our blog' link, showing three article cards in an asymmetric grid. Each card has a photo, a tag pill, a read-time label, and a title.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background hero section with a small eyebrow label, a large two-line headline with the phrase 'friends & family' in gray and underlined, and two side-by-side 'Get consulation' buttons (one filled blue, one outlined). A photo of a smiling woman in glasses and a denim jacket sits on the right, with the content arranged in a split-screen layout.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light gray rounded container displaying a centered testimonial quote with a small pill label, author avatar with name and title, and circular previous and next arrow buttons. The layout is a vertically stacked, centered arrangement suitable for rotating customer or executive quotes.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A thin light gray horizontal strip showing a breadcrumb trail with 'Homepage' in dark text, a slash separator, and 'Services' in muted gray indicating the current page. It provides minimal wayfinding with no visible interactive controls beyond the text links.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-themed FAQ section with a large 'FAQ' heading and a left-column contact prompt linking to an email address. The right column lists eight questions separated by horizontal rules, each with a circular down-arrow expander icon, indicating collapsible accordion rows.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background team section with a large heading on the left and a three-column grid of circular profile photos, each labeled with the role Executive Chairman and a person's name. A text link labeled See more people sits beneath the heading.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background services section with a large 'Services' heading and three numbered rows, each pairing a large title with right-aligned descriptive text and an arrow icon, separated by horizontal rules. A faded architectural floor plan image overlaps the first row, giving it an editorial, minimal layout.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A marketing feature section with a light page heading above a dark rounded panel. The left side has a large headline, supporting text, and an outlined consultation button, while the right side shows a stacked dashboard screenshot with charts and contacts.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered introductory paragraph about a real estate investment firm with an underlined text link, followed by a row of four rounded outlined cards displaying key metrics such as clients, projects, units sold, and area designed. The layout is a centered stack transitioning into a horizontal row of stat cards on a light background.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A horizontal top navigation bar with a wordmark logo on the left, four text links (About, Services, Projects, Contact us), and an outlined pill-shaped call-to-action button labeled "Get consulation" with an arrow on the right. The layout is a single row with a white background and black text.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background portfolio section headed "Selected projects (21)" with category filter pills (All, Villa, Residance, Apartaments) above a mixed-size grid of rounded architectural rendering cards, each with a tag, title, and location. A "See all projects" text link closes the section.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A two-column contact section with a large "Let's talk" heading, introductory copy, phone and email cards, social links, and a trusted-by logo row on the left. The right side holds a white rounded "Contact Us" form with pill-shaped inputs, a dropdown, a message textarea, and a black full-width submit button.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A pricing section headed "Premium Membership" with a billed monthly/yearly toggle and three side-by-side plan cards showing price, a CTA button, and checkmarked feature lists. The middle Basic plan card is highlighted with a blue gradient and a filled blue CTA button.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A split-screen error page displaying 'Error 404' with an error badge, body text, and a 'Back to homepage' outlined button on a white panel, paired with two tall rounded architectural photographs on the right. The layout is spacious and minimal, with a serif-free sans heading and a footer-style caption aligned right.
Browse 122 of ready-made components in Tailwind and Asitrastudio library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.
All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.
Build websites faster with an AI Visual Editor
© 2026 Shuffle. All rights reserved.
See what you're getting before you commit.
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.
