# Content 2

> Content 2 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-content-2).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-content-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-content-2-light-e1a3b21fae8976d1.png
- Registry item: https://uiable.com/r/block-content-2.json
- Categories: content
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-content-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `src/components/uiable/blocks/content/content-2/content-2.tsx`

```tsx
//  ------------------------------ | CONTENT 2 | ------------------------------  //

export default function Content2() {
  return (
    <div className="relative py-24 sm:py-32">
      <div className="absolute inset-0 z-10 bg-linear-to-tr from-emerald-500 to-lime-500"></div>
      <div className="absolute inset-0 z-20 bg-card/85"></div>
      <div className="relative z-30 container mx-auto px-6 lg:px-8">
        <div className="mx-auto max-w-320 overflow-hidden rounded-3xl bg-card p-2 shadow-[0_0_40px_8px_#8e998738]">
          <div className="flex flex-col-reverse items-center xl:flex-row">
            <div className="basis-full xl:basis-6/12">
              <div className="flex flex-col gap-4 p-4 sm:gap-8 md:p-10">
                <h2 className="text-lg font-medium text-slate-800 sm:text-3xl dark:text-slate-50">
                  Requirement Gathering & Task Allocation
                </h2>
                <p className="max-w-200 text-slate-600 dark:text-slate-100">
                  The team will review project requirements and priorities.
                  Responsibilities and initial deliverables will be assigned.
                  Next steps and timelines for the upcoming phase will also be
                  discussed.
                </p>
                <div className="flex flex-col gap-5">
                  <div className="flex flex-row gap-4 sm:items-center">
                    <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-lime-500 text-white shadow-[0_0_40px_-8px_#4680ff38] shadow-lime-500/50 transition-all sm:size-12">
                      <svg
                        className="size-6 sm:size-7"
                        xmlns="http://www.w3.org/2000/svg"
                        width="32"
                        height="32"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11.999 14.171c-2.13 0-3.87-1.73-3.87-3.87s1.74-3.86 3.87-3.86 3.87 1.73 3.87 3.87-1.74 3.86-3.87 3.86Zm0-6.23c-1.3 0-2.37 1.06-2.37 2.37s1.06 2.37 2.37 2.37 2.37-1.06 2.37-2.37-1.07-2.37-2.37-2.37Z"
                          fill="currentColor"
                        ></path>
                        <path
                          d="M12.002 22.76a5.97 5.97 0 0 1-4.13-1.67c-2.95-2.84-6.21-7.37-4.98-12.76 1.11-4.89 5.38-7.08 9.11-7.08h.01c3.73 0 8 2.19 9.11 7.09 1.22 5.39-2.04 9.91-4.99 12.75a5.97 5.97 0 0 1-4.13 1.67Zm0-20.01c-2.91 0-6.65 1.55-7.64 5.91-1.08 4.71 1.88 8.77 4.56 11.34a4.425 4.425 0 0 0 6.17 0c2.67-2.57 5.63-6.63 4.57-11.34-1-4.36-4.75-5.91-7.66-5.91Z"
                          fill="currentColor"
                        ></path>
                      </svg>
                    </div>
                    <div className="flex grow flex-col gap-2">
                      <p className="text-lg leading-none text-slate-800 dark:text-slate-100">
                        Venue
                      </p>
                      <p className="text-md leading-tight text-slate-600 sm:leading-none dark:text-slate-400">
                        245 Westlake Ave, Seattle, Washington
                      </p>
                    </div>
                  </div>
                  <div className="flex flex-row gap-4 sm:items-center">
                    <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-yellow-500 text-white shadow-[0_0_40px_-8px_#4680ff38] shadow-yellow-500/50 transition-all sm:size-12">
                      <svg
                        className="size-6 sm:size-7"
                        xmlns="http://www.w3.org/2000/svg"
                        width="32"
                        height="32"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M13.4 14.6c-.19 0-.38-.07-.53-.22l-1.4-1.4a.75.75 0 0 1-.22-.53V9.66c0-.41.34-.75.75-.75s.75.34.75.75v2.48l1.18 1.18c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22Z"
                          fill="currentColor"
                        ></path>
                        <path
                          d="M12 19.25c-1.59 0-3.09-.5-4.35-1.45-.03-.02-.05-.03-.08-.05A7.243 7.243 0 0 1 4.75 12C4.75 8 8 4.75 12 4.75S19.25 8 19.25 12a7.23 7.23 0 0 1-2.79 5.72c-.03.02-.05.04-.08.06A7.2 7.2 0 0 1 12 19.25Zm-3.57-2.74c.03.02.05.03.07.05 2.03 1.57 5.01 1.56 7.03-.02.02-.02.05-.04.07-.05A5.717 5.717 0 0 0 17.75 12c0-3.17-2.58-5.75-5.75-5.75S6.25 8.83 6.25 12c0 1.77.79 3.41 2.18 4.51Z"
                          fill="currentColor"
                        ></path>
                        <path
                          d="M12.55 22.75h-1.09c-1.96 0-3.16-.97-3.67-2.98l-.5-2.47c-.04-.22.01-.45.16-.62.15-.17.36-.27.58-.27h.01c.17 0 .33.05.46.16 2.03 1.57 5.01 1.56 7.03-.02.31-.24.8-.19 1.05.12.14.17.2.4.16.62l-.51 2.47c-.53 2.02-1.73 2.99-3.68 2.99Zm-3.46-4.11.16.8c.38 1.5 1.16 1.81 2.21 1.81h1.09c1.04 0 1.82-.31 2.21-1.83l.16-.78c-1.81.8-4.01.81-5.83 0ZM16 7.62c-.17 0-.34-.06-.47-.16-2.02-1.58-5-1.59-7.03-.02-.31.24-.8.19-1.04-.11-.14-.17-.2-.4-.16-.62l.49-2.44c.51-2.05 1.71-3.02 3.67-3.02h1.09c1.95 0 3.15.97 3.66 2.96l.52 2.51c.05.22-.01.45-.15.62-.14.18-.35.28-.58.28Zm-4-2.87c1.03 0 2.01.21 2.92.61l-.17-.81c-.39-1.48-1.16-1.8-2.2-1.8h-1.09c-1.05 0-1.83.31-2.21 1.85l-.16.76c.91-.4 1.89-.61 2.91-.61Z"
                          fill="currentColor"
                        ></path>
                      </svg>
                    </div>
                    <div className="flex grow flex-col gap-2">
                      <p className="text-lg leading-none text-slate-800 dark:text-slate-100">
                        Time
                      </p>
                      <p className="text-md leading-tight text-slate-600 sm:leading-none dark:text-slate-400">
                        Monday, 1 July 2026, 2:00 PM – 3:30 PM IST
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="basis-full xl:basis-6/12">
              <div className="relative">
                <img
                  src="https://cdn.uiable.com/block/img-content-2.jpg"
                  alt="Team meeting in a conference room"
                  className="w-full rounded-xl"
                />
                <div className="absolute top-4 -right-15 rotate-45 bg-lime-500 px-17 py-1 text-white shadow-xl">
                  <span className="text-lg font-medium">Step 2</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
```