In this tutorial, we'll simplify the creation of a coupon code form for applying discounts and elevate the aesthetics with a sleek coupon code card designed using Tailwind CSS.
Example 1
Creating a Coupon Code Form with Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create a Coupon Form In Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-1/2 mx-auto p-4">
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<h2 class="text-xl font-semibold mb-4">Have Coupon? Apply Coupon</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="couponCode">
Coupon Code
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="couponCode" type="text" placeholder="Enter your coupon code" />
</div>
<div class="flex items-center justify-between">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="button">
Apply Coupon
</button>
</div>
</form>
</div>
</div>
</body>
</html>
Example 2
Designing a responsive coupon card with Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Coupon Code Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="lg:max-w-md w-full bg-white p-4 rounded-lg shadow-md">
<img
src="https://cdn.pixabay.com/photo/2019/11/13/01/48/cyber-monday-ad-4622347_1280.jpg"
alt="Avatar"
class="w-full"
/>
<div class="container bg-white p-4 mt-4">
<h2 class="text-2xl font-bold text-blue-600">40% OFF YOUR PURCHASE</h2>
<p class="text-base">Lorem ipsum..</p>
</div>
<div class="container mt-4">
<p class="text-base">
Use Promo Code: <span class="font-bold text-red-500">TAILl657</span>
</p>
<p class="expire text-base">Expires: Jan 26, 2024</p>
</div>
</div>
</body>
</html>
Top comments (0)