Tailwind CSS Responsive Patterns

สุดยอดคัมภีร์ Layout 50 รูปแบบ พร้อมปุ่ม Copy Code สำหรับนำไปใช้ได้ทันที

1. Stack to Row (แนวตั้ง สู่ แนวนอน)

รูปแบบยอดนิยม: บนจอมือถือจะเรียงกันในแนวตั้ง และจะเปลี่ยนเป็นแนวนอนเมื่อจอใหญ่ขึ้น เหมาะสำหรับ Card, Feature list

Feature Title

บนจอมือถือ รูปภาพจะอยู่ด้านบน แต่บนจอขนาดกลาง (md) ขึ้นไป รูปภาพจะย้ายมาอยู่ด้านซ้าย

2. Responsive Grid (ตารางปรับขนาดคอลัมน์)

ใช้แสดงรายการสินค้าหรือแกลเลอรี โดยจำนวนคอลัมน์จะเปลี่ยนไปตามขนาดหน้าจอ

1 (Mobile)

2 (Tablet)

4 (Desktop)

Item 4

3. Responsive Navbar (เมนูที่ยุบได้)

เมนูนำทางที่จะแสดงปุ่ม Hamburger บนจอมือถือ และแสดงเมนูเต็มในจอคอมพิวเตอร์

4. Responsive Pricing Table (ตารางราคา)

แสดงแพ็คเกจราคาในรูปแบบตารางที่ปรับจำนวนคอลัมน์ตามขนาดหน้าจอ

Basic Plan

$10/mo

10 Projects
3 Users
Basic Support

Pro Plan

$25/mo

Unlimited Projects
10 Users
Priority Support

Enterprise

$50/mo

Unlimited Everything
SSO Integration
Dedicated Support

5. Two-Column Form (ฟอร์มสองคอลัมน์)

ฟอร์มสำหรับหน้าตั้งค่า ที่แสดงป้ายกำกับและช่องกรอกข้อมูลแยกคอลัมน์บนจอใหญ่ และซ้อนกันบนจอมือถือ

Profile

Update your public information.

Full Name

Email Address

6. Multi-Column Footer (ฟุตเตอร์หลายคอลัมน์)

ส่วนท้ายของเว็บที่จัดกลุ่มลิงก์เป็นหลายคอลัมน์บนจอใหญ่ และรวมเป็นคอลัมน์เดียวบนจอมือถือ

7. Responsive Table (ตารางที่ Scroll ได้)

สำหรับตารางข้อมูลที่มีหลายคอลัมน์ จะทำให้สามารถ scroll แนวนอนได้บนจอมือถือเพื่อไม่ให้ layout พัง

Name	Title	Email	Role	Status
Jane Cooper	Regional Paradigm Technician	jane.cooper@example.com	Admin	Active
Cody Fisher	Product Directives Officer	cody.fisher@example.com	Owner	Inactive

8. Hero Section (ส่วนหัวเว็บพร้อมพื้นหลัง)

ส่วนแรกของเว็บที่ดึงดูดสายตา พร้อมข้อความและปุ่ม Call to Action ที่ปรับขนาดตามหน้าจอ

Your Big Headline

A compelling description to engage your visitors.

9. Feature List with Icons (รายการคุณสมบัติพร้อมไอคอน)

แสดงคุณสมบัติต่างๆ โดยใช้ไอคอนช่วยนำสายตา

Time Saving

Save hours of work every week.

Cost Effective

Affordable for teams of all sizes.

10. Testimonial Cards (การ์ดคำนิยม)

แสดงความคิดเห็นจากลูกค้าในรูปแบบการ์ดที่น่าเชื่อถือ

"This product is amazing! It changed my workflow completely."

Sarah Day

Project Manager, Meta

"I can't imagine working without this tool anymore."

John Doe

Developer, Google

"A must-have for any serious professional."

Emily Smith

CEO, Startup Inc.

11. Stats Section (ส่วนแสดงสถิติ)

แสดงตัวเลขสถิติสำคัญเพื่อสร้างความน่าเชื่อถือ

10,000+

Active Users

500+

Companies

24/7

Support

99.9%

Uptime

12. Timeline / Stepper (ไทม์ไลน์)

แสดงขั้นตอนหรือเหตุการณ์ตามลำดับเวลา

Step 1: Sign Up

Create your account in seconds.

Step 2: Configure Settings

Set up your profile and preferences.

Step 3: Start Creating

Enjoy the full power of our platform.

13. FAQ Accordion (คำถามที่พบบ่อย)

ส่วนคำถาม-คำตอบ ที่สามารถคลิกเพื่อเปิด-ปิดได้ (ใช้ AlpineJS)

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

It has a learning curve, but once you get the hang of utility classes, development speed increases dramatically.

14. Centered Login Form (ฟอร์มล็อกอิน)

การ์ดฟอร์มสำหรับเข้าสู่ระบบที่จัดวางอยู่กึ่งกลาง

Welcome Back!

15. Team Member Cards (การ์ดสมาชิกในทีม)

แสดงสมาชิกในทีมพร้อมรูปภาพ, ชื่อ, และตำแหน่ง

Alex Johnson

CEO & Founder

Maria Garcia

CTO

James Smith

Lead Developer

Linda Brown

Head of Design

16. Contact Form (ฟอร์มติดต่อ)

ฟอร์มติดต่อที่ซับซ้อนขึ้น มีช่องกรอกข้อมูลหลายประเภท

17. Call to Action (ส่วนกระตุ้นการตัดสินใจ)

แถบข้อความและปุ่มที่โดดเด่นเพื่อเชิญชวนให้ผู้ใช้ทำบางสิ่ง

Ready to Dive In?

Start your free trial today.

18. Blog Post Header (ส่วนหัวบทความ)

Layout สำหรับส่วนหัวของบทความ ประกอบด้วยหมวดหมู่, หัวข้อ, และข้อมูลผู้เขียน

TUTORIAL

How to Build Responsive Layouts with Tailwind

Author Name

Oct 7, 2025 · 8 min read

19. Masonry-like Gallery (แกลเลอรีภาพ)

แกลเลอรีรูปภาพที่จัดเรียงคล้าย Masonry โดยใช้ Grid

20. Admin Dashboard Layout (โครงสร้างแดชบอร์ด)

โครงสร้างหน้าสำหรับแอปพลิเคชันหรือหลังบ้าน ที่มี Sidebar และ Content area

Dashboard (Mobile View)

Dashboard

Welcome to your dashboard!

21. Product Card (การ์ดสินค้า)

การ์ดสำหรับแสดงสินค้าในหน้า E-commerce พร้อมราคาและปุ่มเพิ่มลงตะกร้า

Product Name

22. Alternating Feature Sections (ส่วนคุณสมบัติสลับข้าง)

แสดงคุณสมบัติโดยสลับตำแหน่งรูปภาพและข้อความซ้าย-ขวา เพื่อความน่าสนใจ

Feature Title One

Description for the first feature, explaining its benefits and how it helps the user.

Feature Title Two

Description for the second feature, placed on the left on larger screens.

23. Breadcrumbs (เส้นทางนำทาง)

แสดงตำแหน่งปัจจุบันของผู้ใช้ในลำดับชั้นของเว็บไซต์

Home
/ Products
/ Laptops

24. Pagination (การแบ่งหน้า)

คอมโพเนนต์สำหรับนำทางระหว่างหน้าต่างๆ ของรายการข้อมูล

25. Modal/Popup Dialog (หน้าต่างป๊อปอัพ)

หน้าต่างที่แสดงขึ้นมาซ้อนทับเนื้อหาเดิม (ใช้ AlpineJS)

Modal Title

This is the content of the modal. You can put any information here.

26. Split Screen Layout (แบ่งครึ่งจอ)

แบ่งหน้าจอเป็นสองส่วนเท่าๆ กัน ซึ่งจะซ้อนกันในแนตั้งบนจอมือถือ

Left Panel

Content for the left side.

Right Panel

Content for the right side.

27. Responsive Tabs (แท็บ)

แท็บสำหรับสลับการแสดงเนื้อหา บนจอมือถืออาจเปลี่ยนเป็น Dropdown หรือ Scroll ได้

Content for Profile

Content for Settings

Content for Notifications

28. Chat Interface (หน้าต่างแชท)

Layout สำหรับแอปพลิเคชันแชท แสดงข้อความและช่องพิมพ์

Hello! How are you?

I'm fine, thanks! And you?

29. User Profile Page (หน้าโปรไฟล์ผู้ใช้)

โครงสร้างหน้าโปรไฟล์ แสดงรูป, ชื่อ และข้อมูลต่างๆ

Linda Brown

Head of Design at YourCompany

Creative designer with a passion for building beautiful and intuitive user experiences.

30. Logo Cloud (กลุ่มโลโก้ลูกค้า)

แสดงโลโก้ของลูกค้าหรือพาร์ทเนอร์เพื่อสร้างความไว้วางใจ

Trusted by the world's best companies

31. Shopping Cart Summary (สรุปตะกร้าสินค้า)

ส่วนสรุปรายการสินค้าในตะกร้าสำหรับหน้า Checkout

Order Summary

Product Name

Qty: 1

$99.99

Subtotal$99.99

Shipping$5.00

Total$104.99

32. Kanban Board (กระดานคัมบัง)

Layout สำหรับจัดการงาน ที่สามารถ scroll แนวนอนได้บนจอมือถือ

To-Do

Task 1

Task 2

In Progress

Task 3

Done

Task 4

33. Multi-step Form Wizard (ฟอร์มหลายขั้นตอน)

ฟอร์มที่แบ่งเป็นขั้นตอนต่างๆ พร้อม Progress bar

Account

Profile

Finish

Step 1 Content (Account Details)

Step 2 Content (Profile Information)

Step 3 Content (Confirmation)

34. Alerts / Notifications (กล่องแจ้งเตือน)

กล่องข้อความสำหรับแจ้งเตือนสถานะต่างๆ เช่น Success, Error, Warning

Success!

Your action was completed successfully.

Error!

Something went wrong. Please try again.

35. Product Listing with Filters (หน้ารายการสินค้าพร้อมฟิลเตอร์)

Layout สำหรับ E-commerce ที่มีฟิลเตอร์ด้านข้างและรายการสินค้า

Product

36. Video Embed Section (ส่วนวิดีโอ)

แสดงวิดีโอที่ฝังมาในอัตราส่วนที่ถูกต้องและ responsive

37. Job Listings (รายการตำแหน่งงาน)

Layout สำหรับแสดงรายการตำแหน่งงานว่าง

Frontend Developer

Engineering · Remote

Apply Now

Product Designer

Design · San Francisco, CA

Apply Now

38. Calendar View (ปฏิทิน)

โครงสร้างปฏิทินแบบรายเดือนที่ปรับการแสดงผล

Sun

Mon

Tue

Wed

Thu

Fri

Sat

39. Newsletter Signup (ฟอร์มสมัครรับข่าวสาร)

ฟอร์มสำหรับสมัครรับข่าวสารที่แสดงผลได้ดีทั้งแนวตั้งและแนวนอน

Subscribe to our newsletter

Get the latest news and updates delivered to your inbox.

40. Card with Hover Effect (การ์ดพร้อมเอฟเฟกต์)

การ์ดที่ยกตัวขึ้นเมื่อนำเมาส์ไปชี้

Hover Me

This card will lift up and have a more prominent shadow on hover.

41. Radio Button Group Cards (กลุ่ม Radio ในรูปแบบการ์ด)

ใช้การ์ดแทน Radio button ทั่วไปเพื่อประสบการณ์ใช้งานที่ดีขึ้น

Monthly $10 / month

Yearly $100 / year

42. File Upload Component (คอมโพเนนต์อัปโหลดไฟล์)

กล่องสำหรับลากและวางไฟล์เพื่ออัปโหลด

Drop files to Attach, or browse

43. Article List (รายการบทความ)

Layout สำหรับแสดงรายการบทความในหน้า Blog

Category · Oct 8, 2025

Article Title Here

A short description of the article goes here to entice readers...

44. Product Image Gallery (แกลเลอรีรูปภาพสินค้า)

แสดงรูปภาพสินค้าหลักพร้อม thumbnail ด้านล่าง

45. Checkout Form (ฟอร์มชำระเงิน)

Layout สำหรับหน้าชำระเงินที่มีส่วนข้อมูลที่อยู่และข้อมูลบัตรเครดิต

Shipping Information

Order Summary goes here

46. 404 Not Found Page (หน้าเพจไม่พบ)

Layout สำหรับหน้า 404 ที่เป็นมิตรกับผู้ใช้

404

Page Not Found

Sorry, we couldn’t find the page you’re looking for.

Go back home

47. Image Carousel (สไลด์รูปภาพ)

สไลด์สำหรับแสดงรูปภาพหรือเนื้อหาต่างๆ (ใช้ AlpineJS)

48. Mega Menu Dropdown (เมนูขนาดใหญ่)

Dropdown menu ที่มีเนื้อหาและลิงก์จำนวนมาก

Category A

Product A1 Product A2

Category B

Product B1 Product B2

49. Cookie Consent Banner (แถบขอความยินยอมคุกกี้)

แถบแจ้งเตือนที่ด้านล่างของจอสำหรับขอความยินยอมเรื่องคุกกี้

We use cookies to improve your experience. By using our site, you agree to our Cookie Policy.

50. Activity Feed (ฟีดกิจกรรม)

แสดงรายการกิจกรรมล่าสุดที่เกิดขึ้นในแอปพลิเคชัน

John Doe commented on your post.

2 hours ago
Sarah Day uploaded a new file.

1 day ago

1. Stack to Row (แนวตั้ง สู่ แนวนอน)

Feature Title

Feature Title

2. Responsive Grid (ตารางปรับขนาดคอลัมน์)

3. Responsive Navbar (เมนูที่ยุบได้)

4. Responsive Pricing Table (ตารางราคา)

Basic Plan

Pro Plan

Enterprise

5. Two-Column Form (ฟอร์มสองคอลัมน์)

Profile

Section Title

6. Multi-Column Footer (ฟุตเตอร์หลายคอลัมน์)

7. Responsive Table (ตารางที่ Scroll ได้)

8. Hero Section (ส่วนหัวเว็บพร้อมพื้นหลัง)

Your Big Headline

Your Headline

9. Feature List with Icons (รายการคุณสมบัติพร้อมไอคอน)

Time Saving

Cost Effective

Feature Title

10. Testimonial Cards (การ์ดคำนิยม)

11. Stats Section (ส่วนแสดงสถิติ)

12. Timeline / Stepper (ไทม์ไลน์)

Step 1: Sign Up

Step 2: Configure Settings

Step 3: Start Creating

Step Title

13. FAQ Accordion (คำถามที่พบบ่อย)

14. Centered Login Form (ฟอร์มล็อกอิน)

Welcome Back!

Sign In

15. Team Member Cards (การ์ดสมาชิกในทีม)

Alex Johnson

Maria Garcia

James Smith

Linda Brown

Name

16. Contact Form (ฟอร์มติดต่อ)

17. Call to Action (ส่วนกระตุ้นการตัดสินใจ)

Ready to Dive In?

Title

18. Blog Post Header (ส่วนหัวบทความ)

How to Build Responsive Layouts with Tailwind

Article Title

19. Masonry-like Gallery (แกลเลอรีภาพ)

20. Admin Dashboard Layout (โครงสร้างแดชบอร์ด)

Dashboard

21. Product Card (การ์ดสินค้า)

Product Name

Product Name

22. Alternating Feature Sections (ส่วนคุณสมบัติสลับข้าง)

Feature Title One

Feature Title Two

23. Breadcrumbs (เส้นทางนำทาง)

24. Pagination (การแบ่งหน้า)

25. Modal/Popup Dialog (หน้าต่างป๊อปอัพ)

Modal Title

Modal Title

26. Split Screen Layout (แบ่งครึ่งจอ)

Left Panel

Right Panel

27. Responsive Tabs (แท็บ)

28. Chat Interface (หน้าต่างแชท)

29. User Profile Page (หน้าโปรไฟล์ผู้ใช้)

Linda Brown

Name

30. Logo Cloud (กลุ่มโลโก้ลูกค้า)

Trusted by the world's best companies

Title

31. Shopping Cart Summary (สรุปตะกร้าสินค้า)

Order Summary

Order Summary

32. Kanban Board (กระดานคัมบัง)

To-Do

In Progress

Done

Column Title

33. Multi-step Form Wizard (ฟอร์มหลายขั้นตอน)

34. Alerts / Notifications (กล่องแจ้งเตือน)