Bagaimana cara membuat footer dengan Tailwind yang memiliki tiga kolom dan logo di tengah atas?
Berikut adalah cara membuat footer dengan tiga kolom dan logo di bagian tengah atas menggunakan Tailwind CSS. Assisten AI tidak dapat membuat sebuah logo, jadi kita akan gunakan teks biasa sebagai pengganti:\n\n```html\n<div class=\"bg-gray-800 text-white text-sm py-10\">\n    <div class=\"container mx-auto px-8\">\n        <div class=\"flex flex-wrap justify-between\">\n            <!-- Merek atau Logo -->\n            <div class=\"w-full text-center md:text-left md:w-auto mb-8 md:mb-0\">\n                <h3 class=\"text-white text-2xl mb-2\">LOGO</h3>\n                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n            </div>\n\n            <!-- Kolom Pertama -->\n            <div class=\"w-1/2 md:w-auto mb-8 md:mb-0\">\n                <h5 class=\"mb-2 font-semibold\">Kolom Pertama</h5>\n                <ul>\n                    <li class=\"mb-2\"><a href=\"#\">Item 1</a></li>\n                    <li class=\"mb-2\"><a href=\"#\">Item 2</a></li>\n                    <li><a href=\"#\">Item 3</a></li>\n                </ul>\n            </div>\n\n            <!-- Kolom Kedua -->\n            <div class=\"w-1/2 md:w-auto mb-8 md:mb-0\">\n                <h5 class=\"mb-2 font-semibold\">Kolom Kedua</h5>\n                <ul>\n                    <li class=\"mb-2\"><a href=\"#\">Item 1</a></li>\n                    <li class=\"mb-2\"><a href=\"#\">Item 2</a></li>\n                    <li><a href=\"#\">Item 3</a></li>\n                </ul>\n            </div>\n\n            <!-- Kolom Ketiga -->\n            <div class=\"w-1/2 md:w-auto mb-8 md:mb-0\">\n                <h5 class=\"mb-2 font-semibold\">Kolom Ketiga</h5>\n                <ul>\n                    <li class=\"mb-2\"><a href=\"#\">Item 1</a></li>\n                    <li class=\"mb-2\"><a href=\"#\">Item 2</a></li>\n                    <li><a href=\"#\">Item 3</a></li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n```\n\nDalam contoh ini, gunakan class `md:w-auto` dan `w-1/2` untuk pembagian kolom pada ukuran layar yang lebih besar dan kecil. Jangan lupa untuk menyesuaikan warna background (`bg-gray-800`), warna teks (`text-white`), dan ukuran teks (`text-sm`) footer sesuai dengan desain dan estetika web Anda.\n\nNote: Jika menggunakan Tailwind CSS v2.0 ke atas, Anda perlu mengaktifkan fitur `flexWrap` di dalam file konfigurasi Tailwind CSS Anda (`tailwind.config.js`) untuk menggunakan `flex-wrap`. Gunakan class `space-y` untuk mengatur jarak antar elemen. Selain itu, periksa bahwa kelas dan variasi yang Anda gunakan sudah diaktifkan di konfigurasi Tailwind CSS Anda.