Halo, selamat datang kembali di salah satu artikel baraja coding, saya Naufal Aulia dan sekarang, kita akan membahas salah satu library untuk tailwindcss yang sangat membantu proses developing sebuah halaman web yaitu flowbite.

Flowbite adalah open-source library komponen UI berdasarkan kerangka kerja Tailwind CSS utilitas pertama yang menampilkan dukungan mode gelap, sistem desain Figma, dan banyak lagi. Ini mencakup semua komponen yang umum digunakan yang dibutuhkan situs web, seperti tombol, dropdown, bilah navigasi, modals, tetapi juga beberapa elemen interaktif yang lebih canggih seperti pemilih tanggal.

Intinya, Flowbite memudahkan developer yang menggunakan tailwindcss sebagai frameworkcss-nya membuat styling pada elemen-elemen website kita.

Getting Started

Cara tercepat untuk mulai bekerja dengan FlowBite adalah dengan memasukkan CSS dan JavaScript ke proyek Anda melalui CDN.

Membutuhkan stylesheet yang diperkecil berikut di dalam tag head:

<link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.min.css" />

Dan sertakan file javascript berikut sebelum akhir elemen body:

<script src="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.bundle.js"></script>

Dan pada titik ini, kita sudah bisa menggunakan flowbite untuk membangun style elemen pada website kita.

Seperti yang dijelaskan sebelumnya, flowbite menyediakan banyak sekali styled component yang kita, developer, bisa dengan cepat membuat element website yang lengkap dengan stylingnya. Diantara dari beberapa component yang disediakan oleh flowbite adalah:

Card

<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        Read more
        <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </a>
</div>

Dengan kode diatas, akan menghasilkan component card yang sudah ter-styled seperti gambar dibawah.

Footer

<footer class="p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2022 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
    </span>
    <ul class="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
        <li>
            <a href="#" class="mr-4 hover:underline md:mr-6 ">About</a>
        </li>
        <li>
            <a href="#" class="mr-4 hover:underline md:mr-6">Privacy Policy</a>
        </li>
        <li>
            <a href="#" class="mr-4 hover:underline md:mr-6">Licensing</a>
        </li>
        <li>
            <a href="#" class="hover:underline">Contact</a>
        </li>
    </ul>
</footer>

Dengan kode diatas, akan menghasilkan component card yang sudah ter-styled seperti gambar dibawah.

Table

<div class="overflow-x-auto relative">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="py-3 px-6">
                    Product name
                </th>
                <th scope="col" class="py-3 px-6">
                    Color
                </th>
                <th scope="col" class="py-3 px-6">
                    Category
                </th>
                <th scope="col" class="py-3 px-6">
                    Price
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="py-4 px-6">
                    Sliver
                </td>
                <td class="py-4 px-6">
                    Laptop
                </td>
                <td class="py-4 px-6">
                    $2999
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="py-4 px-6">
                    White
                </td>
                <td class="py-4 px-6">
                    Laptop PC
                </td>
                <td class="py-4 px-6">
                    $1999
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800">
                <th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="py-4 px-6">
                    Black
                </td>
                <td class="py-4 px-6">
                    Accessories
                </td>
                <td class="py-4 px-6">
                    $99
                </td>
            </tr>
        </tbody>
    </table>
</div>

Dengan kode diatas, akan menghasilkan component card yang sudah ter-styled seperti gambar dibawah.

Daan masing banyaak lagi component-component yang sudah memiliki style yang bagus dan siap digunakan. Jika diantara dari kalian yang tertarik untuk melihat component tersebut atau tertarik untuk mempelajari lebih dalam soal Flowbite, kalian bisa kunjungi link berikut.

Sekian dulu artikel ini, semoga bermanfaat. Terimakasih!