สร้างเว็บไซต์สวยๆ ได้ทันที พร้อมใช้งาน ฟีเจอร์ครบ ฟรี

ลดเวลาในการพัฒนาเว็บด้วยคอมโพเนนต์ที่ปรับแต่งง่าย ใช้ Tailwind CSS, โหลดไว รองรับ Dark Mode และ SEO-friendly คลิกเพื่อดูตัวอย่างและคัดลอกรหัสไปใช้ได้ทันที!

CTA Sections

Ready to get started?

Join thousands of satisfied customers using our product to grow their business.

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <div class="flex items-center space-x-4">
                    <div class="flex-shrink-0">
                        <img class="h-12 w-12 rounded-full" src="/images/user.jpg" alt="User profile">
                    </div>
                    <div>
                        <h4 class="text-lg font-medium text-gray-900 dark:text-white">John Doe</h4>
                        <p class="text-gray-500 dark:text-gray-400">Web Developer</p>
                    </div>
                </div>
            </div>

Count Summary

นัดหมายที่ใกล้ที่สุด

20 รายการ

รายงานเทศบาล

15 รายการ สำเร็จ

            <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-6">
            <!-- รายการนัดหมาย -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-400">นัดหมายที่ใกล้ที่สุด</h3>
                            <p class="text-gray-600 dark:text-gray-400">20 รายการ</p>
                        </div>
                    </div>
                    <button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 font-medium">ดูทั้งหมด</button>
                </div>
            </div>
                                
            <!-- รายงานเทศบาล -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="bg-green-100 dark:bg-green-900 p-3 rounded-full mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600 dark:text-green-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-400">รายงานเทศบาล</h3>
                            <p class="text-gray-600 dark:text-gray-400">15 รายการ สำเร็จ</p>
                        </div>
                    </div>
                    <button class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 font-medium">ดูทั้งหมด</button>
                </div>
            </div>
            </div>

🚀 เรารับทำเว็บไซต์คุณภาพสูง

พร้อมบริการหลังการขายและรับประกันผลงาน

จ้างเราผ่าน Fastwork