Vertical Blog Card

August 29, 2023 (1y ago)

A responsive Tailwind CSS blog card component for your website.

import VerticalBlogCard from "../../components/snippet-components/vertical-blog-card.tsx";

    <div className="relative flex flex-col justify-center gap-2 pb-2 transition-transform duration-150 ease-out w-72 hover:scale-105 md:w-52 md:gap-1">
      <img
        src="https://travel-land-eta.vercel.app/_next/image?url=%2Fstatic%2Fimages%2Ftravel-2.jpg&w=3840&q=75"
        alt=""
        className="object-cover rounded-lg h-52 md:w-full"
      />
 
      <h4 className="mt-1 text-lg font-semibold text-black">
        Family Road Trip
      </h4>
      <p className="text-sm text-gray-500">
        Road trip hacks that&apos;ll improve your journey experience.
      </p>
 
      <a className="absolute top-0 bottom-0 left-0 right-0 block"></a>
    </div>

Tailwind CSS

Blog Card