Call to Action 2 TailwindCSS
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>
