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

cards ecommerce
this cards have the best animation

Author:
ishimwe shadad

8 months ago

1.2k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

3 months ago

384
delivary
using cars and carts

Author:
Bonimater

7 months ago

1.1k
card
It's a product card

Author:
SAURAV SINGH

9 months ago

1.2k
Card
amazing card

Author:
Cristian

1 year ago

1.8k
Gradient card

Author:
TailwindFlex

2 years ago

9.5k
Product hunt showcase section

Author:
Leon Bachmann

3 years ago

10.4k
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

4k
3D card
it is a 3D card

Author:
Bonimater

8 months ago

863
PlayStore Style Carousel
PlayStore Style Carousel

Author:
Omer fils ELENGA

2 weeks ago

51
card
glowing, tilt card

Author:
Akram Khan

8 months ago

590

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components