offer card

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

Tailwind v3.4 1.5k 6

<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

3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Nicole Shalom

1 year ago

2.1k
Labs card
Lab item list card

Sedat Kumcu

1 year ago

2.6k
Update Profile
Update profile page with basic informations

Sedat Kumcu

1 year ago

3.5k
Call to action card with image
Responsive card with image

Noah Schmidt

3 years ago

16.9k
card

pablitodgb

1 year ago

1.1k
Hover effect card

Rakib Hasan Sohag

1 year ago

2.2k
3D Card
Made a 3d card using tailwind css and the js

Sufyan jutt

7 months ago

825
Product card

Oliver Hansen

3 years ago

10.7k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

254
ApexCodeStudios.com Social Media Post Card
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. This component excels with its clean typography using Inter font, smooth hover effects, responsive design, and seamless light/dark mode switching.

Apex Code Studios

2 months ago

244
Responsive Features Section

ariaw

1 year ago

1.6k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.8k