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

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

Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.9k
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

354
Active Beauty Main Page

Author:
Maxim

7 months ago

919
Team Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.1k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

4 months ago

856
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

20.3k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

17.2k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

2 months ago

331
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

1 year ago

3.3k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

4 months ago

588
Simple Profile Card.
Profile page with basic informations

Author:
Sedat Kumcu

11 months ago

2.7k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components