Home
Andrew Weisbeck
Geaux Code CTA Section

Geaux Code CTA Section

Forked from> @nomthandazo/modern-cta-section

CTA with background patterns

This tailwind example is contributed by Andrew Weisbeck, on 06-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Andrew Weisbeck

1.9k

Fork Fullscreen

<div class="bg-gray-900 h-screen">
    <section>
        <div class="relative">
            <div class="absolute m-auto blur-[160px] max-w-s h-[13rem] top-12 inset-0"
                style="background:linear-gradient(180deg, #7C3AED 0%, rgba(152, 103, 240, 0.984375) 0.01%, rgba(237, 78, 80, 0.2) 100%)">
            </div>
            <div class="relative">
                <div class="custom-screen py-28 relative">
                    <div class="relative z-10 duration-1000 delay-150 opacity-1">
                        <div class="max-w-2xl mx-auto text-center">
                            <h1 class="text-5xl text-sky-300 font-bold">Geaux Code</span>
                            <h2 class="text-gray-50 text-2xl font-bold sm:text-2xl mt-2">Your friendly open-source community for developers</h2>
                            <p class="mt-2 text-gray-300">Don’t just be online – own your place in the open-source world. Join Geaux Code and become part of a vibrant community that is passionate about technology, collaboration, and continuous learning. Let’s grow together and make a difference in the tech world!</p>
                        </div>
                        <div class="flex justify-center font-medium text-md">
                            <form class="mt-6 flex flex-col items-center sm:flex-row sm:gap-x-3">
                                <div class="sm:pt-0 pt-3"><a
                                        class="py-2.5 px-4 text-center rounded-full duration-150 flex items-center justify-center gap-x-1 h-12 text-white bg-black hover:bg-slate-800 ring-offset-2 ring-blue-600 focus:ring shadow rounded-lg active:bg-gray-900"
                                        href="">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor"
                                            viewBox="0 0 24 24">
                                            <path
                                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z">
                                            </path>
                                        </svg>
                                        Open On Github
                                    </a>
                                </div>
                                <div class="sm:pt-0 pt-3"><a
                                        class="py-2.5 px-4 text-center rounded-full duration-150 flex items-center justify-center gap-x-1 h-12 text-white bg-[#5865F2] hover:bg-indigo-700 ring-offset-2 ring-blue-600 focus:ring shadow rounded-lg active:bg-indigo-800"
                                         href="">
                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                                            <path
                                                d="M19.54 0c1.356 0 2.46 1.104 2.46 2.472v21.528l-2.58-2.28-1.452-1.344-1.536-1.428.636 2.22h-13.608c-1.356 0-2.46-1.104-2.46-2.472v-16.224c0-1.368 1.104-2.472 2.46-2.472h16.08zm-4.632 15.672c2.652-.084 3.672-1.824 3.672-1.824 0-3.864-1.728-6.996-1.728-6.996-1.728-1.296-3.372-1.26-3.372-1.26l-.168.192c2.04.624 2.988 1.524 2.988 1.524-1.248-.684-2.472-1.02-3.612-1.152-.864-.096-1.692-.072-2.424.024l-.204.024c-.42.036-1.44.192-2.724.756-.444.204-.708.348-.708.348s.996-.948 3.156-1.572l-.12-.144s-1.644-.036-3.372 1.26c0 0-1.728 3.132-1.728 6.996 0 0 1.008 1.74 3.66 1.824 0 0 .444-.54.804-.996-1.524-.456-2.1-1.416-2.1-1.416l.336.204.048.036.047.027.014.006.047.027c.3.168.6.3.876.408.492.192 1.08.384 1.764.516.9.168 1.956.228 3.108.012.564-.096 1.14-.264 1.74-.516.42-.156.888-.384 1.38-.708 0 0-.6.984-2.172 1.428.36.456.792.972.792.972zm-5.58-5.604c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332.012-.732-.54-1.332-1.224-1.332zm4.38 0c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332 0-.732-.54-1.332-1.224-1.332z">
                                            </path>
                                        </svg>
                                        Join the Community
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <img src="https://i.ibb.co/8D7rcYv/download.webp" width="2880" height="1358" decoding="async" data-nimg="1" class="w-full h-full object-cover m-auto absolute inset-0 pointer-events-none" loading="lazy" style="color:transparent">
                </div>
            </div>
        </div>
    </section>
</div>

Related Examples

Brutalist Hero

Author:
threehymns

11 months ago

2.3k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

1 week ago

108
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

8 months ago

807
Modern CTA section
CTA with background patterns

Author:
Nomthandazo Mhlongo

1 year ago

2.4k
Call to action banner

Author:
isolde

1 year ago

5.2k
Call to example
Call to example using radial-gradient

Author:
Oliver Hansen

2 years ago

8.8k
Content showing for Call to action

Author:
inbarajan P

1 year ago

1.9k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

10 months ago

1.7k
Contact us Form with Responsive

Author:
KULDEEP

4 months ago

370
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

10 months ago

1.5k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

2 months ago

132

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components