Back to Discover
Tailwind CSS Newsletter Signup Form

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
  <body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
      <div class="max-w-md w-full">
          <div class="bg-white rounded-lg shadow-sm p-8" x-data="{ 
              email: '', 
              submitted: false,
              loading: false,
              handleSubmit() {
                  this.loading = true;
                  setTimeout(() => {
                      this.loading = false;
                      this.submitted = true;
                      this.email = '';
                  }, 1500);
              }
          }">
              <!-- Icon -->
              <div class="flex justify-center mb-6">
                  <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                      <ion-icon name="mail-outline" class="text-4xl text-blue-600"></ion-icon>
                  </div>
              </div>

              <!-- Heading -->
              <h2 class="text-2xl font-semibold text-gray-900 text-center mb-2">
                  Stay Updated
              </h2>
              <p class="text-gray-600 text-center mb-8">
                  Subscribe to our newsletter for the latest updates and insights.
              </p>

              <!-- Success Message -->
              <div x-show="submitted" 
                   x-transition
                   class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-start gap-3">
                  <ion-icon name="checkmark-circle" class="text-2xl text-green-600 flex-shrink-0"></ion-icon>
                  <div>
                      <p class="text-green-800 font-medium">Successfully subscribed!</p>
                      <p class="text-green-700 text-sm mt-1">Thank you for joining our newsletter.</p>
                  </div>
              </div>

              <!-- Form -->
              <form @submit.prevent="handleSubmit" x-show="!submitted" x-transition>
                  <div class="mb-4">
                      <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                          Email Address
                      </label>
                      <div class="relative">
                          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                              <ion-icon name="mail-outline" class="text-xl text-gray-400"></ion-icon>
                          </div>
                          <input 
                              type="email" 
                              id="email"
                              x-model="email"
                              required
                              placeholder="you@example.com"
                              class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
                          >
                      </div>
                  </div>

                  <button 
                      type="submit"
                      :disabled="loading"
                      class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
                  >
                      <span x-show="!loading">Subscribe</span>
                      <span x-show="loading" class="flex items-center gap-2">
                          <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Processing...
                      </span>
                      <ion-icon name="arrow-forward" x-show="!loading" class="text-xl"></ion-icon>
                  </button>
              </form>

              <!-- Subscribe Again Button -->
              <button 
                  x-show="submitted"
                  @click="submitted = false"
                  class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition"
              >
                  Subscribe Another
              </button>

              <!-- Privacy Notice -->
              <p class="text-xs text-gray-500 text-center mt-6">
                  We respect your privacy. Unsubscribe at any time.
              </p>
          </div>
      </div>
Comments (0)

No comments yet. Be the first!