Create a Coupon In Tailwind CSS

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>

Blog

Create a Coupon In Tailwind CSS

saim

Example 1

Example 2

Join Our Newsletter. No Spam, Only the good stuff.

Related