Tailwind CSS Subscribe Container with Integrated Footer

Tailwind CSS Subscribe Container with Integrated Footer
Copy link
Sept. 8, 2025
Tailwind, Responsive, Clean UI, Form, Ecommerce, Footer
Full Screen 


<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind CSS Subscribe Container with Integrated Footer</title>
  <!-- google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">

  <style>
    body {
      font-family: Poppins, sans-serif;
    }
  </style>
</head>

<body class="max-w-[1920px] mx-auto text-black text-sm">
  <div class="bg-white">
   

    <div class="mt-28 px-4 sm:px-10">
      <div class="max-w-7xl mx-auto bg-gradient-to-r from-blue-500 via-blue-600 to-blue-900 py-16 px-6 relative">
        <div class="max-w-2xl mx-auto text-center">
          <h2 class="md:text-4xl text-3xl font-semibold mb-6 text-white">Subscribe to Our Newsletter</h2>
          <div class="my-6">
            <p class="text-white">Subscribe to our newsletter and stay up to date with the latest news, updates, and
              exclusive offers. Get
              valuable insights. Join our community today!</p>
          </div>
          <div
            class="max-w-2xl left-0 right-0 mx-auto w-full bg-white p-5 flex items-center shadow-lg absolute -bottom-10 rounded-md">
            <input type="email" placeholder="Enter your email"
              class="w-full bg-gray-50 py-3.5 px-4 text-base focus:outline-none" />
            <button
              class="bg-black hover:bg-[#222] text-white flex items-center transition-all font-semibold px-5 py-4">
              Subscribe
            </button>
          </div>
        </div>
      </div>
    </div>

    <footer class="mt-28">
      <div class="px-4 sm:px-10">
        <div class="grid max-sm:grid-cols-1 max-xl:grid-cols-2 xl:grid-cols-5 gap-8 max-w-7xl mx-auto">
          <div class="xl:col-span-2">
            <a href="javascript:void(0)"><img src="https://docsallover.com/static/images/logo-landscape.png" alt="logo"
                class="w-40 mb-6" />
            </a>
            <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida,
              mi eu pulvinar cursus, sem elit interdum mauris.</p>
          </div>
          <div>
            <h4 class="text-xl font-semibold mb-6">Services</h4>
            <ul class="space-y-4">
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Web
                  Development</a></li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Mobile App
                  Development</a></li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> UI/UX
                  Design</a></li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Digital Marketing</a></li>
            </ul>
          </div>

          <div>
            <h4 class="text-xl font-semibold mb-6">Resources</h4>
            <ul class="space-y-4">
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Webinars</a>
              </li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Ebooks</a>
              </li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Templates</a>
              </li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Tutorials</a></li>
            </ul>
          </div>

          <div>
            <h4 class="text-xl font-semibold mb-4">About Us</h4>
            <ul class="space-y-4">
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Our Story</a>
              </li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Mission and
                  Values</a></li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Team</a></li>
              <li><a href="javascript:void(0)" class="hover:text-blue-600 flex items-center gap-2"><svg
                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-[10px] -rotate-90"
                    viewBox="0 0 24 24">
                    <path fill-rule="evenodd"
                      d="M11.99997 18.1669a2.38 2.38 0 0 1-1.68266-.69733l-9.52-9.52a2.38 2.38 0 1 1 3.36532-3.36532l7.83734 7.83734 7.83734-7.83734a2.38 2.38 0 1 1 3.36532 3.36532l-9.52 9.52a2.38 2.38 0 0 1-1.68266.69734z">
                    </path>
                  </svg> Testimonials</a></li>
            </ul>
          </div>
        </div>
      </div>

      <hr class="my-6" />
      <p class="text-center mb-6">© 2025<a href="https://docsallover.com/" target="_blank"
          class="hover:underline mx-1">Docsallover</a>All Rights Reserved.</p>
    </footer>

  </div>

 
</body>

</html>
                                            
                                        

/* Doesn't require any CSS. */

                                        

//Doesn't require any JS.

This snippet provides a **full-page, integrated design** combining a newsletter subscription form with a comprehensive footer. The design is modern and clean, utilizing Tailwind CSS utility classes to ensure a **responsive and cohesive user interface** that looks great on any device.

Key Features

  • Integrated Design: The subscribe container is visually and functionally integrated with the footer, creating a seamless and logical end-of-page experience for the user.
  • Modern Aesthetics: The use of a blue gradient background for the subscribe section, combined with a simple, well-structured footer, provides a clean and professional look.
  • Clear Call-to-Action: The prominent "Subscribe" heading and clear input field guide users directly to the intended action.
  • Comprehensive Footer: The footer is well-organized with multiple columns for navigation links (e.g., Services, Resources, About Us), providing easy access to key areas of the website.
  • Responsive Layout: The entire component is built to be fully responsive, with the layout adapting gracefully from desktop to mobile screens, ensuring an optimal experience on any device.

Implementation

  • Include Tailwind CSS:Ensure that Tailwind CSS is installed and properly configured in your project.
  • Create the HTML Structure: The HTML is divided into a subscribe container and a footer. The subscribe container includes a heading, a paragraph, and a form with an input field and a button. The footer is built using flexbox or a grid to organize the columns for different link categories.
  • Apply Tailwind CSS Classes: Utilize Tailwind CSS utility classes extensively for styling. This includes classes for gradients (bg-gradient-to-r), flexbox/grid layout (flex, grid), spacing (p-, m-), typography (text-, font-), and responsive design (md:, lg:).
  • Customize as Needed: Easily modify the colors, fonts, links, and content by editing the HTML and changing the associated Tailwind utility classes to match your brand's style.
Latest Snippets
View All
DocsAllOver - Bootstrap 5 Responsive Service Pricing Table Block

Bootstrap 5 Responsive Service Pricing Table Block

Bootstrap
DocsAllOver - Owl Carousel Responsive CSS-Only Team Section Showcase.

Owl Carousel Responsive CSS-Only Team Section Showcase

CSS
DocsAllOver - Responsive Bootstrap 5 Detailed Features Section

Responsive Bootstrap 5 Detailed Features Section

Bootstrap
DocsAllOver - Responsive CSS-Only Glassmorphism Login Form with background image

Responsive CSS-Only Glassmorphism Login Form with background image

CSS
DocsAllOver - Responsive Tailwind CSS Hero Section and Adaptive Navbar

Responsive Tailwind CSS Hero Section and Adaptive Navbar

Tailwind
DocsAllOver - Responsive Bootstrap 5 Compact FAQ Accordion Display

Responsive Bootstrap 5 Compact FAQ Accordion Display

Bootstrap
DocsAllOver - Responsive CSS Only Services Section with Hover Effects

Responsive CSS Only Services Section with Hover Effects

CSS
DocsAllOver - Responsive Tailwind CSS Team Members Display Showcase

Responsive Tailwind CSS Team Members Display Showcase

Tailwind
DocsAllOver - Responsive Bootstrap 5 Clear Process Flow Component

Responsive Bootstrap 5 Clear Process Flow Component

Bootstrap
DocsAllOver - Responsive Interactive Login & Register Form with CSS & JS Transitions

Responsive Interactive Login & Register Form with CSS & JS Transitions

CSS
DocsAllOver - Developer-Focused Tailwind Hero with Live Sample Code Block

Developer-Focused Tailwind Hero with Live Sample Code Block

Tailwind

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

CSS

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

Quick Links

Home Search Link In Bio Privacy Policy

Popular Links

Technical Docs FAQ's Tools Blogs
Copyright copyright © Docsallover - Your One Shop Stop For Documentation