Home
Cristian
Card

Card

amazing card

This tailwind example is contributed by Cristian, on 29-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card,Article Card, Blog page card, Article card

Card Product Blog Card

Author Cristian

1.1k

Fork Fullscreen

<section class="flex justify-center items-center min-h-screen bg-white font-lato">
  <div class="py-20 md:py-8 w-[90%] max-w-[76.5rem] mx-auto text-[#111]">
    <h2 class="capitalize tracking-[0.025em] text-[clamp(2rem,1.8125rem+0.75vw,2.6rem)]">leading companies<br />have trusted us</h2>
    
    <div class="container mt-10 grid gap-8 grid-cols-[repeat(auto-fit,minmax(16rem,1fr))]">
      <div class="card">
        <div class="card-inner relative w-full h-[18.75rem] bg-white rounded-2xl overflow-hidden">
          <div class="box w-full h-full bg-white rounded-2xl overflow-hidden">
            <div class="imgBox absolute inset-0">
              <img class="w-full h-full object-cover" src="https://img.freepik.com/free-photo/lake-with-lots-green-trees-reflected-water-chisinau-moldova_1268-16592.jpg?t=st=1730201653~exp=1730205253~hmac=235d8c2d9698a5f50dda6a870703d3c4d3a9c360f97c4a688f1abe2bfb509152&w=1380" alt="Trust & Co." />
            </div>
            <div class="icon absolute bottom-[-0.375rem] right-[-0.375rem] w-24 h-24 bg-[#d3b19a] rounded-tl-full flex justify-center items-center transition-transform hover:scale-110">
              <a href="#" class="iconBox w-full h-full flex justify-center items-center text-white text-2xl rounded-full">
                <span class="material-symbols-outlined">arrow_outward</span>
              </a>
            </div>
          </div>
        </div>
        <div class="content py-4 px-2.5">
          <h3 class="capitalize text-[clamp(1.5rem,1.3909rem+0.4364vw,1.8rem)]">trust & co.</h3>
          <p class="my-4 text-[#565656]">Fill out the form and the algorithm will offer the right team of experts</p>
          <ul class="flex flex-wrap gap-2">
            <li class="uppercase font-bold text-xs text-[#282828] bg-[#d3b19a] px-2 py-1 rounded">branding</li>
            <li class="uppercase font-bold text-xs text-[#282828] bg-[#70b3b1] px-2 py-1 rounded">packaging</li>
          </ul>
        </div>
      </div>
      
      
      
    </div>
  </div>
</section>

Related Examples

Animated Info Card
Animated info card

Author:
shivam vishvakarma

3 months ago

751
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

6 days ago

19
Labs card
Lab item list card

Author:
Sedat Kumcu

5 months ago

1.2k
Battery and signal
Battery and signal bar component

Author:
ardianhu

3 months ago

359
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

11 months ago

3.3k
Testimonial card

Author:
Leon Bachmann

2 years ago

11.4k
zoom in effect card
A responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.

Author:
Anum Shahana

6 months ago

1.6k
Testimonials

Author:
Samuel Abera

2 weeks ago

373
Active Beauty Main Page

Author:
Maxim

3 weeks ago

146
Simple responsive cards

Author:
Shakti

2 years ago

9k
Card grid for posts

Author:
Mr Robot

2 years ago

20.2k
Card with sale ribbon

Author:
Fagundo67

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components