Marketing Blog Cards Bordered with image, date, title and excerpt, shadow on hover Dark

Live Preview
<article
      class="overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg dark:shadow-gray-700/25"
    >
      <img
        alt=""
        src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160"
        class="h-56 w-full object-cover"
      />

      <div class="bg-white p-4 sm:p-6 dark:bg-gray-900">
        <time datetime="2022-10-10" class="block text-xs text-gray-500 dark:text-gray-400">
          10th Oct 2022
        </time>

        <a href="#">
          <h3 class="mt-0.5 text-lg text-gray-900 dark:text-white">
            How to position your furniture for positivity
          </h3>
        </a>

        <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
          atque dignissimos. Molestias explicabo corporis voluptatem?
        </p>
      </div>
    </article>

Related components

More items from the merged UI library.

View all