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

237

<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

User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

60.3k
Card with full width image
centered content

Author:
Mr Robot

2 years ago

9.7k
Cards section - Sport

Author:
ABDO-SY

1 month ago

771
Testimonial card

Author:
Leon Bachmann

2 years ago

11.4k
Testimonials

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

3 weeks ago

443
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

2 months ago

781
Features grid

Author:
Sophia Baker

2 years ago

9.3k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

9.9k
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

2 years ago

12.1k
Fancy blog post card

Author:
Mr Robot

2 years ago

11.6k
Login form

Author:
Rajesh Maheshwari

2 months ago

575
card profie
profile card

Author:
Aman kumar

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components