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

<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

Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

11.1k
Smooth Scale & Float Reveal
An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

Author:
Juan D. Cortorreal

4 weeks ago

49
Fancy blog post card

Author:
Mr Robot

2 years ago

12.6k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

1 month ago

124
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.7k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

806
split bg 2

Author:
Anonymous

6 months ago

301
Confirmation model

Author:
Mr Robot

3 years ago

13.1k
Profile Card

Author:
Crimson

11 months ago

1.5k
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

1 year ago

3.4k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

2 months ago

85

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components