Vibedex.io
Back to gallery
cardsBeginner

Card — Side Image

Horizontal card with image left, content right.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a horizontal marketing card with Tailwind: image on the left (1/3 width), content on the right (2/3 width) with heading, paragraph, and link. Stacks on mobile.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/cards/4.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-card-4
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-md p-6 w-full">
<a href="#" class="group relative block h-64 sm:h-80 lg:h-96">
      <span class="absolute inset-0 border-2 border-dashed border-black"></span>

      <div
        class="relative flex h-full transform items-end border-2 border-black bg-white transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"
      >
        <div
          class="px-4 pb-4 transition-opacity group-hover:absolute group-hover:opacity-0 sm:px-6 sm:pb-4 lg:px-8 lg:pb-8"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-10 sm:size-12"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>

          <h2 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h2>
        </div>

        <div
          class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
        >
          <h3 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h3>

          <p class="mt-4 text-sm sm:text-base">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, praesentium
            voluptatem omnis atque culpa repellendus.
          </p>

          <p class="mt-8 font-bold">Read more</p>
        </div>
      </div>
    </a>
  </div>
</div>