List Kumpulan Tailwind UI Kit dan Tailwind UI Block - Blog - Naufaldi Rafif Satriya

Ada kalanya, tanpa dengan kita membutuhkan referensi komponen komponen yang digunakan. Ada kalanya pula, dengan desain pun kita memerlukan referensi untuk membuat starter komponen agar sesuai dengan desain.

Saya sering melakukan ini, untuk mengetahui struktur HTML dan bagaimana orang lain bisa membuat komponen tersebut, apakah sama dengan yang telah saya buat.

Lagi pula, TailwindCSS berbeda dengan Boostrap atau Bulma. TailwindCSS tidak memberikan ready component, tapi utility first. Sehingga sangat mudah apa bila kita membuat sebuah ready component dan menginginkan untuk modifikasi sebuah komponen. Tinggal menghapus atau menambahkan nama classnya saja.

Nah, berikut beberapa Tailwind UI Kit yang bisa dijadikan referensi untuk teman-teman :

1\. Tailwind UI

Bahasa : HTML, React dan Vue

Ready component dari Official Tailwind. Beberapa ada yang Free, namun kebanyakan Premium

https://tailwindui.com/

2\. Tailblocks

Bahasa: HTML

Ready Component dan Block dari  Mert Cukuren. Fully Free.

https://tailblocks.cc/

3\. Tailwind CSS Component

Bahasa: HTML

Ready Component dan Template dari Komunitas. Fully Free.

https://tailwindcomponents.com/

4\.  Tailwind Toolbox

Bahasa : HTML dan Vanilla JS

Ready Component dan Template. Fully Free dan didukung dengan JS untuk lebih interaktif

https://www.tailwindtoolbox.com/

5\. Meraki UI

Bahasa : HTML

Ready Component dan Fully Free. Support RTL

https://merakiui.com/

6.Tailwind Card

Ready Component Card dan Fully Free. Hanya komponen kartu dengan berbagai jenis desain dan style

https://tailwind-cards.netlify.app/

7\. Treact

Bahasa : ReactJS

Ready Component and Template. Build with ReactJS and Tailwind v2. Ada tambahan animasi dengan Framer Motion

https://treact.owaiskhan.me/

8\. Tailwind Starter Kit by Creative Team

Bahasa : ReactJS, VueJS dan HTML

Ready Component and Template. Menggunakan Theme Material UI, khas Creative Team. Fully Free

https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

9.Mamba UI

Bahasa : ReactJS dan VueJS

Ready Component and Template. Fully Free.

https://mambaui.com

10\. Windmill Dashboard

Ready Component Dashboard. Fully Free. React UI Library

https://github.com/estevanmaito/windmill-dashboard-react

11\. TailwindUIKit

Ready Component dan Template. Freemium.

https://tailwinduikit.com/

12\. TailKit

Ready Component. Fully Free. Dashboard, Landingpage dan Component.

https://www.tailwind-kit.com/

Kurang lebih itu saja beberapa Tailwind UI Kit yang bisa membantu kita dalam membuat komponen komponen dengan Tailwind UI. Semoga membantu!

Bagikan[](https://twitter.com/share?text=List Kumpulan Tailwind UI Kit dan Tailwind UI Block&url=https://blog.naufaldi.com/list-kumpulan-tailwind-ui-kit-dan-tailwind-ui-block/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/list-kumpulan-tailwind-ui-kit-dan-tailwind-ui-block/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/list-kumpulan-tailwind-ui-kit-dan-tailwind-ui-block//&title=List Kumpulan Tailwind UI Kit dan Tailwind UI Block "LinkedIn")[](/cdn-cgi/l/email-protection#26195553444c4345521b6a4f5552066d534b56534a47480672474f4a514f484206736f066d4f52064247480672474f4a514f484206736f06644a49454d00474b561d4449425f1b4e5252561c0909444a49410840474a424f085e5f5c094a4f55520b4d534b56534a47480b52474f4a514f48420b534f0b4d4f520b4247480b52474f4a514f48420b534f0b444a49454d09 "Email")

Topik Insight TailwindCSS

[

Cara Menangani Responsive di NextJS ( SSR )

Permasalahan Saat menggunakan library react-responsive dan menggabungkannya dengan NextJS serta Twin'…

27 Apr 2021

](/handle-responsive-website-in-nextjs-ssr/)[

Berbagai Cara Membuat Kondisional Class Component / CSS di Emotion dan Tailwind Macro

Pembuka twin.macro atau yang bisa kita sebut sebagai Twin's…

03 Apr 2021

](/membuat-props-class-component-di-emotion-dan-tailwind-macro/)