BB
Bryce Bayens

Call to Action - Copy this React, Tailwind Component to your project

Lets create a few new call to action for a new section new section just call to action <div className={`mt 20 text center transform transition all duration 1000 ${isVisible ? "translate y 0 opacity 100" : "translate y 6 opacity 0"}`} style={{ transitionDelay: "600ms" }}> <div className="relative mx auto bg gradient to br from blue 900 via blue 800 to blue 900 rounded 2xl p 8 md:p 12 shadow xl overflow hidden group"> {/* Animated background elements */} <div className="absolute inset 0 opacity 30"> <div className="absolute top 24 right 24 w 96 h 96 bg blue 400 rounded full filter blur 3xl animate pulse" /> <div className="absolute bottom 24 left 24 w 96 h 96 bg blue 600 rounded full filter blur 3xl animate pulse delay 700" /> </div> {/* Content overlay with glass effect */} <div className="relative backdrop blur sm"> <h3 className="text 2xl md:text 3xl font bold text white mb 4"> Ready to Streamline Ticket Management? </h3> <p className="text blue 100 text lg mb 8 max w 2xl mx auto"> Join thousands of ticket resellers who trust our platform for secure and efficient ticket management. </p> <div className="flex justify center"> <button onClick={() => console.log("Get Started clicked")} className="group w full max w md inline flex items center justify center gap 3 px 8 py 5 text xl font bold rounded xl bg white text blue 700 hover:bg blue 50 transform transition all duration 300 hover:scale 105 focus:outline none focus:ring 2 focus:ring blue 500 focus:ring offset 2 shadow lg" > <span>Get Started</span> <FaRocket className="w 6 h 6 transition transform duration 300 group hover:translate x 1 group hover:rotate 12" /> </button> </div> </div> </div> </div>

Prompt
Component Preview

About

CallToAction - Engage users with a stunning animated button, glass effect overlay, and vibrant gradients, built with React and Tailwin. Download instantly!

Share

Last updated 1 month ago