Tailwind CSS Responsive Patterns

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

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

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

Placeholder

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
Most Popular

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.

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."

Avatar

Sarah Day

Project Manager, Meta

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

Avatar

John Doe

Developer, Google

"A must-have for any serious professional."

Avatar

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 (การ์ดสมาชิกในทีม)

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

Team member

Alex Johnson

CEO & Founder

Team member

Maria Garcia

CTO

Team member

James Smith

Lead Developer

Team member

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

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 Image

Product Name

Category

$99.99

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

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

Feature

Feature Title One

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

Feature

Feature Title Two

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

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

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

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 (หน้าโปรไฟล์ผู้ใช้)

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

Profile picture

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

Client Logo Client Logo Client Logo Client Logo Client Logo Client Logo

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

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

Order Summary

  • Product

    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

1

Account

2

Profile

3

Finish

Step 1 Content (Account Details)
Step 2 Content (Profile Information)
Step 3 Content (Confirmation)

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

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

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

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

Product
Product
Product

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

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

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

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

Frontend Developer

Engineering · Remote

Product Designer

Design · San Francisco, CA

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

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

Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
1
2
3
4
5

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 ทั่วไปเพื่อประสบการณ์ใช้งานที่ดีขึ้น

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

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

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

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

Article

Category · Oct 8, 2025

Article Title Here

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

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

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

Main product image
Thumbnail 1 Thumbnail 2 Thumbnail 3

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 (ฟีดกิจกรรม)

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

  • Avatar

    John Doe commented on your post.

    2 hours ago

  • Avatar

    Sarah Day uploaded a new file.

    1 day ago