uğur sözen

Three-Step How-To

Features

About

A three-step how-it-works feature section with side-by-side step cards, each showing a live media surface (image, video, or embedded component) anchored to the bottom.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Three-Step How-To to your project and fits it to your theme.

Code

How Three-Step How-To is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Feature9, feature9Demo } from "@/components/ui/feature9";

export default function Feature9Demo() {
  return <Feature9 {...feature9Demo} />;
}

More by uğur sözen

View all
  • Worth Keeping CTA

    Worth Keeping CTA

    221
  • Comparison Slider with Highlights

    Comparison Slider with Highlights

    195
  • Before/After Image Slider

    Before/After Image Slider

    125
  • Invoice History Table

    Invoice History Table

    71
  • Recipe Card

    Recipe Card

    38
  • Shop by Category Grid

    Shop by Category Grid

    36
  • PIN Keypad Unlock

    PIN Keypad Unlock

    36
  • Trigger to Action

    Trigger to Action

    34

More in Features

View all
  • Grid Feature Cards

    Grid Feature Cards

    1.9K
  • Feature Sections

    Feature Sections

    178
  • Features 8

    Features 8

    3.1K
  • Features Card

    Features Card

    213
  • Features 2

    Features 2

    324
  • Feature with advantages

    Feature with advantages

    283
  • Feature Modern

    Feature Modern

    17
  • Features 1

    Features 1

    280