Call to action block for use with websites and landing pages.

Dependencies

  • Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - CTA 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="cta-2 bg-indigo-600 py-12">
        <div class="container px-4 mx-auto">
            <div class="md:flex md:-mx-4 md:items-center xl:py-4">
                <div class="md:w-1/2 px-4">
                    <p class="text-2xl text-white">High quality FWR blocks are carefully crafted to let you create your website quickly and easily</p>
                </div>
                <div class="md:w-1/2 px-4 sm:text-center mt-12 md:mt-0">
                    <button class="py-2 px-6 bg-white text-indigo-600 border-2 border-solid border-white hover:bg-transparent hover:text-white rounded mb-3 sm:mb-0 mx-auto sm:mx-2 block sm:inline-block transition-colors duration-300">Get Started</button>
                    <button class="py-2 px-6 text-white border-2 border-solid border-white hover:bg-white hover:text-indigo-600 rounded mx-auto sm:mx-2 block sm:inline-block transition-colors duration-300">Learn More</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.cta-2 -->

    <!-- Scripts -->
</body>
</html>

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvY3RhL2NhbGwtdG8tYWN0aW9uLTI=