<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="overflow-hidden rounded-xl">
<div class="flex flex-wrap">
<div class="w-full md:w-1/2">
<div class="relative h-full overflow-hidden">
<div class="absolute z-10 bottom-7 left-7 rounded-full">
<a class="group flex flex-wrap items-center -m-1" href="#">
<div class="w-auto p-1">
<svg width="99" height="99" viewbox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="49.0879" cy="49.0874" r="30.9375" fill="white"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5004 89.0999C71.3709 89.0999 89.1004 71.3704 89.1004 49.4999C89.1004 27.6294 71.3709 9.8999 49.5004 9.8999C27.6299 9.8999 9.90039 27.6294 9.90039 49.4999C9.90039 71.3704 27.6299 89.0999 49.5004 89.0999ZM47.2962 35.4813C45.7772 34.4686 43.8242 34.3742 42.2147 35.2356C40.6052 36.097 39.6004 37.7744 39.6004 39.5999V59.3999C39.6004 61.2254 40.6052 62.9028 42.2147 63.7642C43.8242 64.6256 45.7772 64.5312 47.2962 63.5186L62.1462 53.6186C63.5232 52.7005 64.3504 51.155 64.3504 49.4999C64.3504 47.8449 63.5232 46.2993 62.1462 45.3813L47.2962 35.4813Z" fill="#171A1F"></path>
</svg>
</div>
<div class="w-auto p-1">
<h3 class="font-semibold text-3xl w-40 group-hover:underline" style="letter-spacing: -0.5px;">Watch this How to video</h3>
</div>
</a>
</div>
<img class="w-full h-full object-cover transform hover:scale-105 transition duration-500" src="basko-assets/images/cta/bg.jpg" alt="">
</div>
</div>
<div class="flex-1 md:w-1/2">
<div class="p-10 flex flex-col justify-between h-full bg-black">
<div class="mb-12">
<h2 class="font-heading mb-8 text-6xl text-white tracking-tighter">Get more traffic with customized marketing strategies.</h2>
<a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
<div>
<h3 class="mb-3 text-3xl font-semibold text-white" style="letter-spacing: -0.5px;">Start with a free trial - no credit card required.</h3>
<p class="text-gray-400 tracking-tight">We never share your data with third parties.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Effectively collecting contacts is the goal of most sites. A well thought out Tailwind call to action component section must clearly define the path objective and the data collection goal.
Choose from many variations of Tailwind components call to action. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Tailwind components call to action, code and our editor. Try the demo for free.
