[email protected]

Hero: CTA hero block

By atikur-rabbi

CTA hero block

Share

/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 \r\n\r\n \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 \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 \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 \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n","author_type":"App\\User","author_id":3078,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":2426,"popularity":81,"slug":"hero-cta-hero-block","approved":1,"created_at":"2024-02-10T00:00:00.000000Z","updated_at":"2025-06-18T10:10:56.000000Z","downloads":22,"code_views":275,"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

atikur-rabbi

20 components Profile On

Hero: CTA hero block

Community Rate

Related components