Home
ABDO-SY
offer card

offer card

This tailwind example is contributed by ABDO-SY, on 13-Mar-2025. Component is made with Tailwind CSS v3.

Card

1.2k

<section class="pt-12">
  <div class="bg-[#C2EFD4] mx-auto w-[1400px] relative flex justify-around items-center">
    <div class="absolute left-10 bottom-0 w-[156px] h-[110px] grid grid-cols-4  ">
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
      <div class="w-2 h-2  bg-[#328b55] rounded-full"></div>
    </div><img src="https://iili.io/3Bvpo4R.png" alt="">
    <div class="w-[589px] h-[447px] rounded-[3px]">
      <h2 class="  text-[#224f34] text-[46px] font-bold font-['Roboto_Slab']">Exclusive offer</h2>
      <p class="w-[589px] text-[#224f34] text-[22px] font-medium font-['Poppins'] leading-9">Unlock the ultimate style
        upgrade with our exclusive offer Enjoy savings of up to 40% off on our latest New Arrivals</p>
      <div class="flex gap-9 my-10 font-['Poppins'] ">
        <div
          class="w-[100px] h-[100px] text-center py-4 bg-white rounded-[3px] shadow-[0px_7px_30px_0px_rgba(0,0,0,0.05)]">
          <span class=" block text-[#224f34] text-[32px] font-semibold">06</span><span class=" block text-[#224f34] text-base font-medium">Days</span>
        </div>
        <div
          class="w-[100px] h-[100px] text-center py-4 bg-white rounded-[3px] shadow-[0px_7px_30px_0px_rgba(0,0,0,0.05)]">
          <span class=" block text-[#224f34] text-[32px] font-semibold">18</span><span class=" block text-[#224f34] text-base font-medium">Hours</span>
        </div>
        <div
          class="w-[100px] h-[100px] text-center py-4 bg-white rounded-[3px] shadow-[0px_7px_30px_0px_rgba(0,0,0,0.05)]">
          <span class=" block text-[#224f34] text-[32px] font-semibold">48</span><span class=" block text-[#224f34] text-base font-medium">min</span>
        </div>
      </div>
      <button class=" px-16 py-5   bg-[#224f34] rounded-[3px] shadow-[0px_7px_30px_0px_rgba(0,0,0,0.05)]   text-white text-xl font-medium font-['Poppins'] uppercase">BUY NOW</button>
    </div>
  </div>
</section>

Related Examples

Food delivery ecommerce Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.9k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.9k
404 Error card
Error card at the center

Author:
Shakti

3 years ago

9.6k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

10 months ago

1.5k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

1 year ago

1.4k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

1 year ago

1k
Experince Section

Author:
ABDO-SY

1 year ago

1k
Coupon code card
Display Special Offer with Coupon Code

Author:
Dipti narayan

2 years ago

11.1k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.6k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 year ago

1.8k
card simple

Author:
Raul antonio de la cruz hernandez

3 weeks ago

141
cards ecommerce
this cards have the best animation

Author:
ishimwe shadad

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components