Home
Matej Kovač
Beautiful post cards

Beautiful post cards

This tailwind example is contributed by Matej Kovač, on 02-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Matej Kovač

1.5k

Fork Fullscreen

<div class="flex flex-col w-fit mx-auto">
  <div class="product-card grid grid-cols-1 md:grid-cols-2 gap-10 py-12 lg:pb-8 lg:pt-10">
    <div
      class="bg-gradient-to-b from-blue-400 to-blue-200 dark:from-gray-800 dark:to-gray-700 border rounded-xl w-fit mx-auto flex flex-col justify-center gap-y-4">
      <div class="w-full flex flex-col justify-between gap-y-5 max-w-[20rem] mx-auto p-5 rounded-xl">
        <img class="rounded-[calc(20px-12px)] rounded-b-none" src="https://images.unsplash.com/photo-1570831739435-6601aa3fa4fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxwcm9kdWN0fGVufDB8MHx8fDE3MTIwNjI5MDF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Professional UI/UX Design Service" style="width: 100%; height: 250px;">
        <div class="flex flex-col gap-y-2">
          <h4 class="text-2xl font-bold text-black dark:text-white lg:text-left">Professional UI/UX Design Service
          </h4>
          <p class="text-black dark:text-white text-sm lg:text-left">Our expert designers craft stunning user
            interfaces and seamless experiences tailored to your needs.</p>
          <button class="flex item-start bg-black text-white w-fit px-5 py-1 rounded-full">Get Started</button>
        </div>
      </div>
    </div>
    <div
      class="bg-gradient-to-b from-green-400 to-green-200 dark:from-gray-800 dark:to-gray-700 border rounded-xl w-fit mx-auto flex flex-col justify-center gap-y-4">
      <div class="w-full flex flex-col justify-between gap-y-5 max-w-[20rem] mx-auto p-5 rounded-xl">
        <img class="rounded-[calc(20px-12px)] rounded-b-none" src="https://images.unsplash.com/photo-1559056199-641a0ac8b55e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxwcm9kdWN0fGVufDB8MHx8fDE3MTIwNjI5MDF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Innovative UI Design Solutions" style="width: 100%; height: 250px;">
        <div class="flex flex-col gap-y-2">
          <h4 class="text-2xl font-bold text-black dark:text-white lg:text-left">Innovative UI Design Solutions</h4>
          <p class="text-black dark:text-white text-sm lg:text-left">Transform your ideas into reality with our
            cutting-edge UI design solutions that captivate your audience.</p>
          <button class="flex item-start bg-black text-white w-fit px-5 py-1 rounded-full">Get Started</button>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

404 Error card
Error card at the center

Author:
Shakti

1 year ago

8k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

10.3k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

Author:
Samuel Abera

7 months ago

2.3k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

3 months ago

898
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

11.9k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

8 months ago

8.2k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

8.5k
Card with sale ribbon

Author:
Fagundo67

1 year ago

9.8k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

10.6k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

1 year ago

11.3k
Info card

Author:
Laurits

2 years ago

9.8k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components