Beautiful post cards

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

Card

Author Matej Kovač

Tailwind v3.4 3.5k 10

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

Card template

Raul antonio de la cruz hernandez

8 months ago

529
test deepseek ticket
test deepseek ticket

Omer fils ELENGA

1 day ago

8
Futuristic 3D Tilt Card
Hover to see the 3D effect

Quentin Rivers

1 year ago

3.7k
Labs card
Lab item list card

Sedat Kumcu

1 year ago

2.6k
Issue card
card designed to display the details of a technical issue

ABDO-SY

1 year ago

2.7k
Shop Now Amazon x
Product cards

ORGIN_DREAMS

1 year ago

1.8k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

7 months ago

732
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

10 months ago

646
Coming Soon Page

Conan Hilton

4 years ago

10.6k
component

pablitodgb

1 year ago

1.6k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

3 months ago

429
Border gradient

Samuel Dawson

3 years ago

17.6k