<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
<img class="hidden lg:block absolute top-0 right-0 h-128 w-128 -mt-52 -mr-52" src="zospace-assets/lines/circle.svg" alt="">
<img class="hidden lg:block absolute bottom-0 left-0 h-128 w-128 -mb-52" src="zospace-assets/lines/full-circle.svg" alt="">
<img class="block absolute bottom-0 left-0 h-24 md:h-32 lg:h-72 lg:ml-24 -mb-8" src="zospace-assets/images/five-stars.svg" alt="">
<img class="block absolute bottom-0 left-0 h-128 w-128 -mb-96 -ml-24" src="zospace-assets/lines/circle.svg" alt="">
<div class="container px-3 mx-auto">
<div class="max-w-3xl mx-auto text-center">
<span class="text-lg text-blue-400 font-bold">What's new at Shuffle</span>
<h2 class="my-10 text-5xl lg:text-6xl font-bold font-heading text-white">The quick brown fox jumps over the lazy dog.</h2>
<div class="max-w-md mx-auto">
<p class="mb-20 text-lg text-gray-200">A short message that will bring your customers into the world of your imagination.</p>
<a class="inline-block mb-4 sm:mb-0 sm:mr-4 py-5 px-12 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Join us now</a><a class="inline-block py-5 px-12 text-white font-bold border border-gray-300 hover:border-gray-200 rounded-full" href="#">Active demo</a>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 80
- Application 80
- Banner 20
- Blog 100
- Call to action 152
- Careers 20
- Contact 76
- Content 65
- Cookies 79
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 66
- Features 170
- Footers 100
- Graphs 19
- HTTP codes 77
- Headers 122
- How it works 99
- Logo clouds 120
- Modals 8
- Navbar 44
- Navigation (horizontal) 146
- Navigation (vertical) 2
- Newsletter 87
- Portfolio 77
- Pricing 94
- Reviews 10
- Rich text 3
- Sign in / Sign up 120
- Stats 115
- Tables 56
- Team 85
- Testimonials 107
- Users 17
Component #1
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.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
