[email protected]

Hero: CTA hero block

By atikur-rabbi

CTA hero block

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":1548,"popularity":66,"slug":"hero-cta-hero-block","approved":1,"created_at":"2024-02-10T00:00:00.000000Z","updated_at":"2024-09-19T02:22:40.000000Z","downloads":17,"code_views":212,"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">
atikur-rabbi

Community Rate

Related components

tailwind Tailwind CSS Integrations cloud section
Tailus UI
Tailwind CSS Integrations cloud section Tailus UI
3.3
tailwind Tailwind CSS Contact Section with Cards
Loopple
Tailwind CSS Contact Section with Cards Loopple
3.3
tailwind Airbnb user state
Kouakou Marius
Airbnb user state Kouakou Marius
3.3
tailwind Tailwind CSS Two Features Section
ale
Tailwind CSS Two Features Section ale
3.3
tailwind Tailwind CSS featured post image Left
maxacrea
Tailwind CSS featured post image Left maxacrea
3.3
tailwind Tailwind CSS featured post - top card
maxacrea
Tailwind CSS featured post - top card maxacrea
3.3
See more components