TW Components
Components
All Components
awesome
69
Accordions
7
Alerts
33
Alpinejs
93
Avatars
20
Badges
9
Banner
13
Blockquote
3
Bottom Navigation
5
Breadcrumb
9
Button Group
9
Buttons
429
Calendar
12
Cards
807
Carousel
5
Charts
13
Chat
11
Checkbox
14
Chip
8
Collapse
3
Cursor
0
Dashboard
35
Datepicker
3
Device Mockups
2
Drawer
2
Dropdowns
39
Faq
8
Features
23
File Upload
6
Floating Label
9
awesome
69
Footers
17
Forms
407
Gallery
6
Grid
17
Headers
36
Headings
1
Hr
0
Icons
100
Images
17
Indicators
2
Inputs
163
Jumbotron
9
Kbd
1
Kit
3
Layout
88
Links
3
List
49
Logins
127
Masonry
5
Mega Menu
2
Menu
23
Modals
58
Music Player
6
Navbars
29
Navigations
296
Number Input
7
Pages
695
Pagination
13
Paragraphs
4
awesome
69
Popover
10
Pricing
25
Progress
8
Radio Button
7
Range Slider
7
Rating
8
Scrollbar
9
Search bar
7
Selects
14
Shadows
1
Sidebar
38
Skeleton
4
Slider
15
Speed dial
0
Spinner
7
Stepper
2
Switch
8
Tables
74
Tabs
23
Testimonials
8
Text
8
Textarea
3
Timeline
16
Toast
4
Toggle
11
Tooltip
9
Typography
11
Video
6
Widget
752
Components
Resources
Cheatsheet
Gradient Generator
Blog
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
33
Alpinejs
93
Avatars
20
Badges
9
Banner
13
Blockquote
3
Bottom Navigation
5
Breadcrumb
9
Button Group
9
Buttons
429
Calendar
12
Cards
807
Carousel
5
Charts
13
Chat
11
Checkbox
14
Chip
8
Collapse
3
Cursor
0
Dashboard
35
Datepicker
3
Device Mockups
2
Drawer
2
Dropdowns
39
Faq
8
Features
23
File Upload
6
Floating Label
9
awesome
69
Footers
17
Forms
407
Gallery
6
Grid
17
Headers
36
Headings
1
Hr
0
Icons
100
Images
17
Indicators
2
Inputs
163
Jumbotron
9
Kbd
1
Kit
3
Layout
88
Links
3
List
49
Logins
127
Masonry
5
Mega Menu
2
Menu
23
Modals
58
Music Player
6
Navbars
29
Navigations
296
Number Input
7
Pages
695
Pagination
13
Paragraphs
4
awesome
69
Popover
10
Pricing
25
Progress
8
Radio Button
7
Range Slider
7
Rating
8
Scrollbar
9
Search bar
7
Selects
14
Shadows
1
Sidebar
38
Skeleton
4
Slider
15
Speed dial
0
Spinner
7
Stepper
2
Switch
8
Tables
74
Tabs
23
Testimonials
8
Text
8
Textarea
3
Timeline
16
Toast
4
Toggle
11
Tooltip
9
Typography
11
Video
6
Widget
752
Components
Resources
Cheatsheet
Gradient Generator
Blog
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]
Hero: CTA hero block
By atikur-rabbi
CTA hero block
Fork
Upvote
1
Share
React Components Library
Material Tailwind
Get Started
/r/n <p class=\"me-2 inline-block text-white text-sm\">\r\n Preline UI Figma is live.\r\n <\/p>\r\n <span class=\"group-hover:bg-white\/[.1] py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-white\/[.075] font-semibold text-white text-sm\">\r\n <svg class=\"flex-shrink-0 w-4 h-4\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/a>\r\n <\/div>\r\n <!-- End Announcement Banner -->\r\n\r\n <!-- Title -->\r\n <div class=\"max-w-3xl text-center mx-auto\">\r\n <h1 class=\"block font-medium text-gray-200 text-4xl sm:text-5xl md:text-6xl lg:text-7xl\">\r\n Now it's easier than ever to build products\r\n <\/h1>\r\n <\/div>\r\n <!-- End Title -->\r\n\r\n <div class=\"max-w-3xl text-center mx-auto\">\r\n <p class=\"text-lg text-gray-400\">Preline is a large open-source project, crafted with Tailwind CSS framework by Hmlstream.<\/p>\r\n <\/div>\r\n\r\n <!-- Buttons -->\r\n <div class=\"text-center\">\r\n <a class=\"inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700\/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800\" href=https://www.creative-tim.com/"#\">\r\n Get started\r\n <svg class=\"flex-shrink-0 w-4 h-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <!-- End Buttons -->\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<!-- End Hero -->","author_type":"App\\User","author_id":3078,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":1483,"popularity":63,"slug":"hero-cta-hero-block","approved":1,"created_at":"2024-02-10T00:00:00.000000Z","updated_at":"2024-08-29T05:46:24.000000Z","downloads":16,"code_views":210,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11453,"model_type":"App\\Component","model_id":6232,"collection_name":"preview","name":"temp72386","file_name":"temp72386.png","mime_type":"image\/png","disk":"public","size":51507,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp72386___media_library_original_1280_957.png","temp72386___media_library_original_1070_800.png","temp72386___media_library_original_895_669.png","temp72386___media_library_original_749_560.png","temp72386___media_library_original_627_469.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU1pqaXZUT0JFZm1VaWdENXBnU0thQ1dJNHlhQkZTN0x4UmtvTW4wcW9wTjZnM29KWXZKTkhseHROT2NWRjZDVGJSY1FZTlFNZlFBMG9EUUFCQUtBSFVBZi8vWiI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":1,"created_at":"2024-02-10T20:42:51.000000Z","updated_at":"2024-02-10T20:42:52.000000Z","conversions_disk":"public","uuid":"64a1998c-c773-4071-bab1-34f9fc9137d7","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11453\/temp72386.png","preview_url":""}],"author":{"id":3078,"name":"atikur-rabbi","slug":"atikur-rabbi","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13056586?v=4","header":null,"created_at":"2021-04-16T05:00:12.000000Z","updated_at":"2021-04-16T05:00:12.000000Z"},"tags":[{"id":73,"name":{"en":"Features"},"description":"The Tailwind CSS Features is used to highlight key features or aspects of a product or service. See below our collection of Features components that you can add directly to your Tailwind UI project.","meta_description":"Visit our Tailwind CSS Features component examples that you can add to your web project to create awesome web apps.","slug":{"en":"features"},"type":null,"order_column":62,"created_at":"2023-10-05T07:53:50.000000Z","updated_at":"2023-10-05T07:53:50.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6232,"tag_id":73}}],"fork":null,"favorites":[{"id":20290,"name":"Mohd Mohsin","slug":"mohd-mohsin","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/9da09dcf986e95c5dc734ba18c5af5cc","header":null,"created_at":"2024-08-26T14:16:13.000000Z","updated_at":"2024-08-26T14:16:13.000000Z","pivot":{"component_id":6232,"user_id":20290}}]}" :edit="false">
Full screen Preview
Download
atikur-rabbi
20 components
Profile On
Community Rate
Related components
Tailwind CSS Two Features Section
ale
3.3
Peaceful mind section
Shehab coding
3.3
Tailwind CSS newsletter sign up
Shehab coding
3.3
hero component
rvino12
3.3
Tailwind CSS Features Section
codewizardben
3.3
Tailwind CSS featured post image Right styled
maxacrea
3.3
See more components