Zubair Mohsin 
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.
