Alrighty, kicking off day 4 of my side project with nothing but positive vibes 🙌🏼
Initial Thoughts
- This popup needs to be 3-step.
- First step, customer enters the secret sauce.
- Second step, we verify if it is indeed the secret sauce 🤓
- Third step, customer gets a discount and we get their secret sauce. Win win 🎉
- Need to look at some animation stuff. Because I am thinking of adding an animation when customer move to next step. Something like a Wizard or Multi-step form 🤔
- Not sure how would I achieve this in TailwindCSS.
Jumping into code… 👨🏽💻
Before that… Googling for multi-step form with TailwindCSS 😂
Alright, below link seems like a good starting point 👇🏼
https://tailwindcomponents.com/component/multistep-form-with-tailwindcss-and-alpinejs
Jumping into code… Again 👨🏽💻
Progress
- I was able to tweak the above snippet according to my requirements and achieve the multi-step concept just yet. Its not fully functional of course.
Putting the code for this below 👇🏼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Discount Popup</title> </head> <body> <!-- component --> <!-- This is an example component --> <div class="h-screen"> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script> <style> [x-cloak] { display: none; } </style> <div x-data="app()" x-cloak> <div class="container bg-purple-600 py-6 px-5 rounded"> <div class="max-w-3xl mx-auto mb-10"> <div x-show.transition="step === 'complete'"> <div class="bg-white rounded-lg p-10 flex items-center shadow justify-between"> <div> <svg class="mb-4 h-20 w-20 text-green-500 mx-auto" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg> <h2 class="text-2xl mb-4 text-gray-800 text-center font-bold">DISCOUNT</h2> <div class="text-gray-600 mb-8"> Thank you. Enjoy your discount at the checkout. </div> <button @click="step = 1" class="w-40 block mx-auto focus:outline-none py-2 px-5 rounded-lg shadow-sm text-center text-gray-600 bg-white hover:bg-gray-100 font-medium border" >Back to home</button> </div> </div> </div> <div x-show.transition="step != 'complete'"> <div class="text-white py-5 px-5"> <h1>Hi 👋</h1> <p>Up for a Discount?</p> </div> <!-- Step Content --> <div class="bg-white py-5 px-5 rounded"> <div x-show.transition.in="step === 1"> <div class="mb-5"> <label for="firstname" class="font-bold mb-1 text-gray-700 block">Secret Sauce Part 1</label> <input type="text" class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2" placeholder="Enter your secret sauce... "> </div> <div class="mb-5"> <label for="email" class="font-bold mb-1 text-gray-700 block">Secret Sauce Part 2</label> <input type="text" class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2" placeholder="Enter your secret sauce..."> </div> <div class="w-1/2"> <button @click="step++" class="w-32 focus:outline-none border border-transparent py-2 px-5 rounded-lg shadow-sm text-center text-white bg-blue-500 hover:bg-blue-600 font-medium" >Next</button> </div> </div> <div x-show.transition.in="step === 2"> <div class="mb-5"> <label for="profession" class="font-bold mb-1 text-gray-700 block">Verification</label> <input type="text" class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2" placeholder="Just making sure it belongs to you"> </div> <div class="flex justify-between"> <div class="w-1/2"> <button @click="step--" class="w-32 focus:outline-none py-2 px-5 rounded-lg shadow-sm text-center text-gray-600 bg-white hover:bg-gray-100 font-medium border" >Go Back</button> </div> <div class="w-1/2 "> <button @click="step = 'complete'" class="w-32 focus:outline-none border border-transparent py-2 px-5 rounded-lg shadow-sm text-center text-white bg-blue-500 hover:bg-blue-600 font-medium" >Verify</button> </div> </div> </div> </div> <!-- / Step Content --> </div> </div> </div> </div> <script> function app() { return { step: 1, } } </script> </body> </html> Time Spent
1 and half hour
Signing off 😴
P.S.
If anybody ( other than me 😂 ) reading it, you might be interested in following me on Twitter. I tweet about Laravel, Shopify and React stuff.