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.
Responsive Contact Us Section in Tailwind CSS
File Upload Form with Tailwind CSS
Bootstrap 4 Login Form with Social Media Integration
Simple Catalog Card Template Using Bootstrap 4 with Hover Effect
Product Card Grid with Images and Pricing in Tailwind
Customer Testimonial Grid in Dark Mode with Tailwind CSS
E-commerce Product Card in Detail Template with Bootstrap 4
Dual Design Registration Form in Bootstrap 4
Bootstrap 4 Responsive Categories Card with Hover Effects
Bootstrap 4 Toggle Switch with Custom Text Labels
Bootstrap 5 Features Catalog with Use Cases
Fancy User Login Form in Bootstrap 5 with Background Gradient Color
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.