TW Components
Components
All Components
awesome
69
Accordions
7
Alerts
37
Alpinejs
93
Avatars
21
Badges
10
Banner
13
Blockquote
3
Bottom Navigation
5
Breadcrumb
10
Button Group
11
Buttons
441
Calendar
12
Cards
840
Carousel
5
Charts
13
Chat
12
Checkbox
15
Chip
9
Collapse
4
Cursor
0
Dashboard
36
Datepicker
3
Device Mockups
4
Drawer
2
Dropdowns
42
Faq
8
Features
23
File Upload
6
Floating Label
9
awesome
69
Footers
19
Forms
414
Gallery
6
Grid
17
Headers
36
Headings
1
Hr
1
Icons
103
Images
17
Indicators
2
Inputs
182
Jumbotron
9
Kbd
1
Kit
3
Layout
89
Links
3
List
51
Logins
131
Masonry
5
Mega Menu
2
Menu
23
Modals
62
Music Player
6
Navbars
33
Navigations
296
Number Input
20
Pages
699
Pagination
14
Paragraphs
4
awesome
69
Popover
11
Pricing
26
Progress
9
Radio Button
9
Range Slider
7
Rating
10
Scrollbar
10
Search bar
9
Selects
16
Shadows
1
Sidebar
43
Skeleton
5
Slider
15
Speed dial
0
Spinner
7
Stepper
2
Switch
10
Tables
76
Tabs
25
Testimonials
10
Text
8
Textarea
3
Timeline
18
Toast
4
Toggle
13
Tooltip
9
Typography
11
Video
6
Widget
752
Components
Resources
Cheatsheet
Gradient Generator
Blog
David UI Blocks
UI / UX Book
Free Blocks
PRO Blocks
React Components
Admin & Dashboards
Templates & Kits
Ecosystem
Material Tailwind
React Tailwind
Angular Tailwind
Astro Tailwind
Custom Development
PRO Blocks
Discover
Submit
Login
Components
All Components
awesome
69
Accordions
7
Alerts
37
Alpinejs
93
Avatars
21
Badges
10
Banner
13
Blockquote
3
Bottom Navigation
5
Breadcrumb
10
Button Group
11
Buttons
441
Calendar
12
Cards
840
Carousel
5
Charts
13
Chat
12
Checkbox
15
Chip
9
Collapse
4
Cursor
0
Dashboard
36
Datepicker
3
Device Mockups
4
Drawer
2
Dropdowns
42
Faq
8
Features
23
File Upload
6
Floating Label
9
awesome
69
Footers
19
Forms
414
Gallery
6
Grid
17
Headers
36
Headings
1
Hr
1
Icons
103
Images
17
Indicators
2
Inputs
182
Jumbotron
9
Kbd
1
Kit
3
Layout
89
Links
3
List
51
Logins
131
Masonry
5
Mega Menu
2
Menu
23
Modals
62
Music Player
6
Navbars
33
Navigations
296
Number Input
20
Pages
699
Pagination
14
Paragraphs
4
awesome
69
Popover
11
Pricing
26
Progress
9
Radio Button
9
Range Slider
7
Rating
10
Scrollbar
10
Search bar
9
Selects
16
Shadows
1
Sidebar
43
Skeleton
5
Slider
15
Speed dial
0
Spinner
7
Stepper
2
Switch
10
Tables
76
Tabs
25
Testimonials
10
Text
8
Textarea
3
Timeline
18
Toast
4
Toggle
13
Tooltip
9
Typography
11
Video
6
Widget
752
Components
Resources
Cheatsheet
Gradient Generator
Blog
David UI Blocks
UI / UX Book
Free Blocks
PRO Blocks
React Components
Admin & Dashboards
Templates & Kits
Ecosystem
Material Tailwind
React Tailwind
Angular Tailwind
Astro Tailwind
Custom Development
PRO Blocks
Discover
Submit
Login
[email protected]
Task Manager
By banny
Task Manager Tailwind CSS
Fork
Upvote
10
Share
React Components Library
Material Tailwind
Get Started
/r/n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n Nuegas\r\n <\/a>\r\n <ul>\r\n <li>\r\n <a href=https://www.creative-tim.com/"/">/r/n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n Nuegas\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"/">/r/n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n Nuegas\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"/">/r/n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n Nuegas\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"/">/r/n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n Nuegas\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"/">/r/n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n Nuegas\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n <!-- Box Alert -->\r\n <div class=\"hidden\">\r\n <img src=https://www.creative-tim.com/"/" alt=\"\" \/>\r\n <h2>Help Center<\/h2>\r\n <p>Having Trouble in Learning. Please contact us for more questions.<\/p>\r\n <\/div>\r\n <!-- End -->\r\n <!-- Main -->\r\n <main class=\"\">\r\n <div class=\"bg-white px-4\">\r\n <div>\r\n <h2 class=\"text-2xl font-semibold text-gray-900\">Explore Mentors<\/h2>\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"my-6 mr-4 flex w-full items-center justify-between rounded-lg border px-3 py-3 sm:w-[350px] sm:flex-initial\">\r\n <input class=\"w-full text-sm outline-none\" type=\"text\" placeholder=\"Search Mentors\" \/>\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-5 w-6 text-gray-400\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-6 w-6 text-gray-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z\" \/>\r\n <\/svg>\r\n <span class=\"hidden sm:block\">Category<\/span>\r\n <\/div>\r\n <div class=\"hidden md:block\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-6 w-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z\" \/>\r\n <\/svg>\r\n <span>Sort By : Popular<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"px-4\">\r\n <div class=\"my-5 flex items-center justify-between\">\r\n <h2 class=\"text-lg font-semibold text-gray-900\">Recent Mentors<\/h2>\r\n <div class=\"flex\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-2 h-5 w-5 text-gray-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" \/>\r\n <\/svg>\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-5 w-5 text-gray-900\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mb-6 sm:w-1\/2 rounded-lg bg-white p-6\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <img class=\"mr-2 h-10 w-10 rounded-full object-cover\" src=https://www.creative-tim.com/"https:////images.unsplash.com//photo-1566753323558-f4e0952af115?q=80&w=1921&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\%22 alt=\"profile\" \/>\r\n <div>\r\n <h3 class=\"text-base font-semibold text-gray-900\">Kotler Philips<\/h3>\r\n <span class=\"block text-xs font-normal text-gray-500\">Web Developer<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm font-medium text-indigo-500\"><span class=\"mr-0.5\">+<\/span>Follow<\/p>\r\n <\/div>\r\n <div class=\"mt-6 flex items-center justify-between text-sm font-semibold text-gray-900\">\r\n <div class=\"flex\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-2 h-5 w-5 text-base text-gray-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122\" \/>\r\n <\/svg>\r\n <span class=\"mr-1\">40<\/span> Task\r\n <\/div>\r\n <div class=\"flex items-center\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-1 h-5 w-6 text-yellow-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" \/>\r\n <\/svg>\r\n 4,7 (750 Reviews)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"px-4\">\r\n <div class=\"my-5\">\r\n <h2 class=\"text-lg font-semibold text-gray-900\">Mentors<\/h2>\r\n <\/div>\r\n <div class=\"grid sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3\">\r\n <div class=\"mb-6 rounded-lg bg-white p-6\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <img class=\"mr-2 h-10 w-10 rounded-full object-cover\" src=https://www.creative-tim.com/"https:////images.unsplash.com//photo-1633332755192-727a05c4013d?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\%22 alt=\"profile\" \/>\r\n <div>\r\n <h3 class=\"text-base font-semibold text-gray-900\">Alex Stanton<\/h3>\r\n <span class=\"block text-xs font-normal text-gray-500\">UI \/ UX Designer<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm font-medium text-indigo-500\"><span class=\"mr-0.5\">+<\/span>Follow<\/p>\r\n <\/div>\r\n <p class=\"my-6 text-sm font-normal text-gray-500\">Hi, I'm Jessica Jane. I am a doctoral student at Harvard University majoring in Web . . .<\/p>\r\n <div class=\"mt-6 flex items-center justify-between text-sm font-semibold text-gray-900\">\r\n <div class=\"flex\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-2 h-5 w-5 text-base text-gray-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122\" \/>\r\n <\/svg>\r\n <span class=\"mr-1\">40<\/span> Task\r\n <\/div>\r\n <div class=\"flex items-center\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-1 h-5 w-6 text-yellow-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" \/>\r\n <\/svg>\r\n 4,7 (750 Reviews)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mb-6 rounded-lg bg-white p-6\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <img class=\"mr-2 h-10 w-10 rounded-full object-cover\" src=https://www.creative-tim.com/"https:////images.unsplash.com//photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\%22 alt=\"profile\" \/>\r\n <div>\r\n <h3 class=\"text-base font-semibold text-gray-900\">Antoine<\/h3>\r\n <span class=\"block text-xs font-normal text-gray-500\">Android Developer<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm font-medium text-indigo-500\"><span class=\"mr-0.5\">+<\/span>Follow<\/p>\r\n <\/div>\r\n <p class=\"my-6 text-sm font-normal text-gray-500\">Hi, I'm Alex Stanton. I am a doctoral student at Oxford University majoring in UI \/ UX . . .<\/p>\r\n <div class=\"mt-6 flex items-center justify-between text-sm font-semibold text-gray-900\">\r\n <div class=\"flex\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-2 h-5 w-5 text-base text-gray-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122\" \/>\r\n <\/svg>\r\n <span class=\"mr-1\">40<\/span> Task\r\n <\/div>\r\n <div class=\"flex items-center\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-1 h-5 w-6 text-yellow-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" \/>\r\n <\/svg>\r\n 4,7 (750 Reviews)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mb-6 rounded-lg bg-white p-6\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <img class=\"mr-2 h-10 w-10 rounded-full object-cover\" src=https://www.creative-tim.com/"https:////images.unsplash.com//photo-1566492031773-4f4e44671857?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\%22 alt=\"profile\" \/>\r\n <div>\r\n <h3 class=\"text-base font-semibold text-gray-900\">Richard Kyle<\/h3>\r\n <span class=\"block text-xs font-normal text-gray-500\">2D Design<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm font-medium text-indigo-500\"><span class=\"mr-0.5\">+<\/span>Follow<\/p>\r\n <\/div>\r\n <p class=\"my-6 text-sm font-normal text-gray-500\">Hi, I'm Antoine Griezmann. I'm an Android Developer at Google company . . .<\/p>\r\n <div class=\"mt-6 flex items-center justify-between text-sm font-semibold text-gray-900\">\r\n <div class=\"flex\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-2 h-5 w-5 text-base text-gray-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122\" \/>\r\n <\/svg>\r\n <span class=\"mr-1\">40<\/span> Task\r\n <\/div>\r\n <div class=\"flex items-center\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"mr-1 h-5 w-6 text-yellow-500\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" \/>\r\n <\/svg>\r\n 4,7 (750 Reviews)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":4463,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":5905,"popularity":465,"slug":"task-manager","approved":1,"created_at":"2023-11-11T00:00:00.000000Z","updated_at":"2025-04-18T14:25:15.000000Z","downloads":150,"code_views":791,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10738,"model_type":"App\\Component","model_id":5726,"collection_name":"preview","name":"temp13993","file_name":"temp13993.png","mime_type":"image\/png","disk":"public","size":91941,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp13993___media_library_original_1280_957.png","temp13993___media_library_original_1070_800.png","temp13993___media_library_original_895_669.png","temp13993___media_library_original_749_560.png","temp13993___media_library_original_627_469.png","temp13993___media_library_original_524_392.png","temp13993___media_library_original_439_328.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVGl6bUxQdzJSUUkwaE1GSE5BQ2lZRVVCY3EzVEdUanRSWUxsT3h4R1RsY1VBV0pac3VCamluc0FTUzdGeU9hTGhZV09RT3VUMXAzRllkNVh0UllMZ0lzVVdBUEs5cUxCY2Q1UXBXQzUvL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":1,"created_at":"2023-11-11T14:34:10.000000Z","updated_at":"2023-11-11T14:34:12.000000Z","conversions_disk":"public","uuid":"4101bdcc-e0b4-431d-bc98-5b642d9bf04b","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10738\/temp13993.png","preview_url":""}],"author":{"id":4463,"name":"banny","slug":"banny","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/6dc5e4950b260687309cb98b1e54a539","header":null,"created_at":"2021-08-02T10:34:12.000000Z","updated_at":"2024-05-23T04:50:18.000000Z"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check out our examples of beautifully designed cards that will help you display your content easily. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our examples of beautifully designed cards that will help you display your content easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:06:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5726,"tag_id":4}},{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5726,"tag_id":7}},{"id":41,"name":{"en":"Layout"},"description":"A layout component includes sections of your website that you want to share across multiple pages. See below our collection of Layouts that you can add directly to your Tailwind UI project.","meta_description":"Visit our Layouts collection that you can add to your Tailwind UI project to create awesome websites.","slug":{"en":"layout"},"type":null,"order_column":40,"created_at":"2022-08-31T14:27:17.000000Z","updated_at":"2022-12-21T11:01:02.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5726,"tag_id":41}}],"fork":null,"favorites":[{"id":3241,"name":"moneya","slug":"moneya","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7353773?v=4","header":null,"created_at":"2021-04-28T15:37:06.000000Z","updated_at":"2021-04-28T15:37:06.000000Z","pivot":{"component_id":5726,"user_id":3241}},{"id":4536,"name":"paramjeet-dhiman","slug":"paramjeet-dhiman","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86948618?v=4","header":null,"created_at":"2021-08-08T03:47:42.000000Z","updated_at":"2021-08-08T03:47:42.000000Z","pivot":{"component_id":5726,"user_id":4536}},{"id":12286,"name":"s8990","slug":"s8990","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/16442699?v=4","header":null,"created_at":"2023-05-09T08:10:34.000000Z","updated_at":"2023-05-09T08:10:34.000000Z","pivot":{"component_id":5726,"user_id":12286}},{"id":13886,"name":"allanokothdev","slug":"allanokothdev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/19547628?v=4","header":null,"created_at":"2023-08-30T10:34:02.000000Z","updated_at":"2023-08-30T10:34:02.000000Z","pivot":{"component_id":5726,"user_id":13886}},{"id":14819,"name":"pig4cloud","slug":"pig4cloud","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1275609899385319430\/huNqFDlg_normal.jpg","header":null,"created_at":"2023-10-22T17:10:10.000000Z","updated_at":"2023-10-22T17:10:10.000000Z","pivot":{"component_id":5726,"user_id":14819}},{"id":3081,"name":"Taniform","slug":"taniform","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7942529?v=4","header":null,"created_at":"2021-04-16T10:08:01.000000Z","updated_at":"2021-04-16T10:08:01.000000Z","pivot":{"component_id":5726,"user_id":3081}},{"id":19872,"name":"Igor097","slug":"igor097","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26531334?v=4","header":null,"created_at":"2024-07-19T11:28:44.000000Z","updated_at":"2024-07-19T11:28:44.000000Z","pivot":{"component_id":5726,"user_id":19872}},{"id":20150,"name":"nicolasjrz","slug":"nicolasjrz-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61887365?v=4","header":null,"created_at":"2024-08-14T15:26:13.000000Z","updated_at":"2024-08-14T15:26:13.000000Z","pivot":{"component_id":5726,"user_id":20150}},{"id":7779,"name":"helxsz","slug":"helxsz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/669670?v=4","header":null,"created_at":"2022-05-07T11:19:08.000000Z","updated_at":"2022-05-07T11:19:08.000000Z","pivot":{"component_id":5726,"user_id":7779}},{"id":21232,"name":"KnifeThirty","slug":"knifethirty","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1468946615289270276\/fPM4j2-8_normal.jpg","header":null,"created_at":"2024-12-03T17:21:34.000000Z","updated_at":"2024-12-03T17:21:34.000000Z","pivot":{"component_id":5726,"user_id":21232}}]}" :edit="false">
Full screen Preview
Download
banny
123 components
Community Rate
Related components
Airbnb card
Kouakou Marius
3.3
Sidebar
banny
2.2
Footer Component - Tailwind CSS
Karthik Ponnam
2.0
Testimonial UI
mithicher
1.9
Card Login (very simple)
xpdeal
3.3
User Profile Card (Small)
amirrahman132132
2.1
See more components