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

763

<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

Labs card
Lab item list card

Author:
Sedat Kumcu

11 months ago

1.6k
Card
Card

Author:
Aman kumar

1 year ago

1.3k
image

Author:
pablitodgb

3 months ago

199
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

5 months ago

774
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:

Author:
Nicole Shalom

4 months ago

795
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

2 months ago

310
Card profile
profile card

Author:
Aman kumar

1 year ago

2.7k
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

4 months ago

422
Border gradient

Author:
Samuel Dawson

2 years ago

16k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

3 years ago

12.9k
Card with social media share buttons

Author:
Computer guy

2 years ago

8.8k
Group hover card
article card

Author:
Sienna

2 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components