Design a Subscription Page in Tailwind CSS

Last Updated : 05 Mar, 2024

A subscription page is a web page where users can sign up to receive regular updates, newsletters, or services. It typically includes a form for users to enter their email address and possibly other details, along with a submit button. In this article, we will see how to design a subscription page using

Screenshot-2024-02-23-151620

Approach :

Created a simple HTML structure with a form for the subscribing to the newsletter.
Styled the elements using the Tailwind CSS classes to achieve a clean and modern design.
Include an input field for the email address and a submit button, with the input field marked as required.
Added JavaScript to the handle form submission and display a success message upon subscribing.

Example: Implementation to design a subscription page.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Newsletter</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-200">
    <div class="container flex justify-center items-center h-screen">
        <div class="card bg-white shadow-lg rounded-lg p-8 max-w-md">
            <h2 class="text-green-600 text-2xl font-bold mb-4">
                  Subscribe to GFG Newsletter
              </h2>
            <p class="text-gray-600 mb-4">
                  Be Updated with latest technologies
              </p>
            <form id="thanks" method="POST"
                  class="flex flex-col items-center">
                <input type="email" name="email" id="email"
                       placeholder="Enter your email"
                    class="w-full px-4 py-2 border border-gray-300 
                           rounded-md mb-4" required>
                <button type="submit"
                        class="bg-green-500 hover:bg-green-600 
                           text-white font-bold px-4 py-2 rounded-md 
                           transition duration-300 ease-in-out mb-4">
                      Subscribe
                  </button>
            </form>
            <p class="msg text-green-500 mt-4 hidden">
                  Thanks for subscribing!
              </p>
        </div>
    </div>
    <script>
        const form = document.getElementById("thanks");
        const successMessage = document.querySelector(".msg");
        form.addEventListener("submit", function (e) {
            e.preventDefault();
            successMessage.classList.remove("hidden");
        });
    </script>
</body>
 
</html>