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>
tailwind coupon code
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>
tailwind css coupon card
Example 3
Black Friday Promotional Card.
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">Black Friday Sale!</div>
<p class="text-gray-700 text-base text-center">
Get 50% off on all products. Use code: <span class="font-bold">BLACKFRIDAY50</span>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#shopping</span>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#sale</span>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#blackfriday</span>
</div>
</div>
<div class="max-w-md rounded overflow-hidden shadow-lg">
<img class="w-full"
src="https://images.pexels.com/photos/5585841/pexels-photo-5585841.jpeg?auto=compress&cs=tinysrgb&w=1600"
alt="Product Image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Exclusive Black Friday Deal</div>
<p class="text-gray-700 text-base">
Up to 70% off on select products. Limited time offer!
</p>
</div>
<div class="px-6 pt-4 pb-2">
<button class="bg-black hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Shop Now
</button>
</div>
</div>
tailwind black friday
