Tailwind CSS Hero Section with Call-to-Action and Image

Tailwind CSS Hero Section with Call-to-Action and Image



<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <section class="pt-24 bg-white">
        <div class="px-12 mx-auto max-w-7xl">
            <div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
                <h1 class="mb-8 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
                    <span>Start</span> <span class="block w-full py-2 text-transparent bg-clip-text leading-12 bg-gradient-to-r from-green-400 to-purple-500 lg:inline">building a buzz</span> <span>around your product ?</span>
                </h1>
                <p class="px-0 mb-8 text-lg text-gray-600 md:text-xl lg:px-24">
                    Start gaining the traction you've always wanted with our next-level templates and designs. Crafted to help you tell your story.
                </p>
                <div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
                    <a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-green-400 rounded-2xl sm:w-auto sm:mb-0">
                        Get Started
                        <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                    </a>
                    <a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg bg-gray-100 rounded-2xl sm:w-auto sm:mb-0">
                        Learn More
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
                    </a>
                </div>
            </div>
            <div class="w-full mx-auto mt-20 text-center md:w-10/12">
                <div class="relative z-0 w-full mt-8">
                    <div class="relative overflow-hidden shadow-2xl">
                        <div class="flex items-center flex-none px-4 bg-green-400 rounded-b-none h-11 rounded-xl">
                            <div class="flex space-x-1.5">
                                <div class="w-3 h-3 border-2 border-white rounded-full"></div>
                                <div class="w-3 h-3 border-2 border-white rounded-full"></div>
                                <div class="w-3 h-3 border-2 border-white rounded-full"></div>
                            </div>
                        </div>
                        <img src="https://cdn.devdojo.com/images/march2021/green-dashboard.jpg">
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>
                                            
                                        

Doesn't require any CSS.

                                        

Doesn't require any JS.

                                        

This Tailwind CSS snippet creates a visually striking hero section for your website, featuring a compelling call-to-action button and a captivating background image. The section is designed to grab attention and encourage visitors to take the desired action.

Key Features:

  • Responsive design: Adapts seamlessly to different screen sizes for optimal viewing on all devices.
  • Customizable styling: Easily modify the colors, fonts, and layout to match your brand's aesthetic.
  • Call-to-action button: Includes a prominent button with a clear and concise label.
  • Background image: Features a visually appealing background image that enhances the overall design.
  • Tailwind CSS classes: Utilizes Tailwind CSS's utility-first approach for efficient and flexible styling.

Implementation:

  • Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
  • Create the HTML structure: Set up the basic HTML elements for the hero section, including a container, heading, paragraph, and call-to-action button.
  • Apply Tailwind CSS classes: Use Tailwind CSS classes to style the elements according to your desired design. For example, you might use bg-gray-800 text-white for a dark background with white text.

Building Blocks for Your Web Pages

Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.

Bootstrap

Browse Snippets

Tailwind

Browse Snippets
See More Categories

DocsAllOver

Where knowledge is just a click away ! DocsAllOver is a one-stop-shop for all your software programming needs, from beginner tutorials to advanced documentation

Get In Touch

We'd love to hear from you! Get in touch and let's collaborate on something great

Copyright copyright © Docsallover - Your One Shop Stop For Documentation