DEV Community

Cover image for Create a Coupon In Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

 tailwind css coupon card

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Retry later