<!-- card with badge -->
<div class="card card-shadow vertical-card flex-column relative 
              transition-2 mr-1 my-2">
    <span class="card-badge text-base font-semibold absolute top-1 left-1 
              rounded-sm">New</span>
    <div>
        <img src="../assets/jacket.jpg" alt="avatar" />
    </div>
    <div class="text-center">
        <p class="mt-2 mb-1">Men premium jacket</p>
        <h3 class="mb-1">₹2000</h3>
        <button class="p-1 w-100 font-semibold card-btn transition-2">
            Add to cart
        </button>
    </div>
</div>

<!-- card with dismiss -->
<div class="card card-shadow vertical-card flex-column relative 
            transition-2 mr-1 my-2">
    <span class="card-badge-bg absolute text-base top-1 right-1 
             rounded-full flex-row flex-center pointer">
        <i class="fa fa-close"></i>
    </span>
    <div>
        <img src="../assets/jacket.jpg" alt="avatar" />
    </div>
    <div class="text-center">
        <p class="mt-2 mb-1">Men premium jacket</p>
        <h3 class="mb-1">₹2000</h3>
        <button class="p-1 w-100 font-semibold card-btn transition-2">
            Add to cart
        </button>
    </div>
</div>