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č

2.9k

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

Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

10.5k
Total balance overview

Author:
Raul antonio de la cruz hernandez

3 months ago

520
card2
card2

Author:
pablitodgb

8 months ago

454
Responsive Cards

Author:
Anonymous

1 year ago

1.8k
Pokemon!
Cool Pokemon card!

Author:
Crimson

1 year ago

1.9k
Card
Card

Author:
Aman kumar

1 year ago

2.6k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

1 year ago

1.8k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

52.3k
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

1 month ago

212
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

10 months ago

1.1k
card profie
profile card

Author:
Aman kumar

2 years ago

4.3k
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

10 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components