Pricing

Ported from HyperUI’s Pricing — see Attribution.

Options with tier, price, features and call to action with highlighted option

MobileSMMDLGFullLTR

Flutter

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});

  final String svg;

  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}

class Pricing1Example extends StatelessWidget {
  const Pricing1Example({super.key});

  static const _checkSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center md:gap-8',
        children: [
          Style(
            'rounded-2xl border border-indigo-600 p-6 shadow-xs ring-1 ring-indigo-600 sm:order-last sm:px-8 lg:p-12',
            children: [
              Style(
                'text-center',
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Style(
                      'text-lg font-medium text-gray-900',
                      children: [
                        Text('Pro '),
                        Style('sr-only', child: Text('Plan')),
                      ],
                    ),
                    Style(
                      'mt-2 sm:mt-4',
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: const [
                          Style(
                            'text-3xl font-bold text-gray-900 sm:text-4xl',
                            display: DisplayType.inline,
                            child: Text('\$30 '),
                          ),
                          Style(
                            'text-sm font-medium text-gray-700',
                            display: DisplayType.inline,
                            child: Text('/month'),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Style(
                'mt-6 space-y-2',
                children: [
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('20 users included'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('5GB of storage'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('Email support'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('Help center access'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('Phone support'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('Community access'),
                      ),
                    ],
                  ),
                ],
              ),
              const Style(
                'mt-8 block rounded-full border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-indigo-700 hover:ring-1 hover:ring-indigo-700',
                cursor: SystemMouseCursors.click,
                child: Text('Get Started'),
              ),
            ],
          ),
          Style(
            'rounded-2xl border border-gray-200 p-6 shadow-xs sm:px-8 lg:p-12',
            children: [
              Style(
                'text-center',
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Style(
                      'text-lg font-medium text-gray-900',
                      children: [
                        Text('Starter '),
                        Style('sr-only', child: Text('Plan')),
                      ],
                    ),
                    Style(
                      'mt-2 sm:mt-4',
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: const [
                          Style(
                            'text-3xl font-bold text-gray-900 sm:text-4xl',
                            display: DisplayType.inline,
                            child: Text('\$20 '),
                          ),
                          Style(
                            'text-sm font-medium text-gray-700',
                            display: DisplayType.inline,
                            child: Text('/month'),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Style(
                'mt-6 space-y-2',
                children: [
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('10 users included'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('2GB of storage'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('Email support'),
                      ),
                    ],
                  ),
                  Style(
                    'flex items-center gap-1',
                    children: [
                      Style(
                        'size-5 text-indigo-700',
                        child: CurrentColorIcon(_checkSvg),
                      ),
                      const Style(
                        'text-gray-700',
                        child: Text('Help center access'),
                      ),
                    ],
                  ),
                ],
              ),
              const Style(
                'mt-8 block rounded-full border border-indigo-600 bg-white px-12 py-3 text-center text-sm font-medium text-indigo-600 hover:ring-1 hover:ring-indigo-600',
                cursor: SystemMouseCursors.click,
                child: Text('Get Started'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Original HTML

<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center md:gap-8">
    <div
      class="rounded-2xl border border-indigo-600 p-6 shadow-xs ring-1 ring-indigo-600 sm:order-last sm:px-8 lg:p-12"
    >
      <div class="text-center">
        <h2 class="text-lg font-medium text-gray-900">
          Pro
          <span class="sr-only">Plan</span>
        </h2>

        <p class="mt-2 sm:mt-4">
          <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> $30 </strong>

          <span class="text-sm font-medium text-gray-700">/month</span>
        </p>
      </div>

      <ul class="mt-6 space-y-2">
        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> 20 users included </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> 5GB of storage </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> Email support </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> Help center access </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> Phone support </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> Community access </span>
        </li>
      </ul>

      <a
        href="#"
        class="mt-8 block rounded-full border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-indigo-700 hover:ring-1 hover:ring-indigo-700"
      >
        Get Started
      </a>
    </div>

    <div class="rounded-2xl border border-gray-200 p-6 shadow-xs sm:px-8 lg:p-12">
      <div class="text-center">
        <h2 class="text-lg font-medium text-gray-900">
          Starter
          <span class="sr-only">Plan</span>
        </h2>

        <p class="mt-2 sm:mt-4">
          <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> $20 </strong>

          <span class="text-sm font-medium text-gray-700">/month</span>
        </p>
      </div>

      <ul class="mt-6 space-y-2">
        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> 10 users included </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> 2GB of storage </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> Email support </span>
        </li>

        <li class="flex items-center gap-1">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5 text-indigo-700"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>

          <span class="text-gray-700"> Help center access </span>
        </li>
      </ul>

      <a
        href="#"
        class="mt-8 block rounded-full border border-indigo-600 bg-white px-12 py-3 text-center text-sm font-medium text-indigo-600 hover:ring-1 hover:ring-indigo-600"
      >
        Get Started
      </a>
    </div>
  </div>
</div>

Options with tier, description, price, call to action and features

MobileSMMDLGFullLTR

Flutter

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});

  final String svg;

  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}

class Pricing2Example extends StatelessWidget {
  const Pricing2Example({super.key});

  static const _checkSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>''';
  static const _xSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return Style(
      'max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16',
      child: Style(
        'grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-stretch md:grid-cols-3 md:gap-8',
        children: [
          Style(
            'divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs',
            children: [
              Style(
                'p-6 sm:px-8',
                children: [
                  Style(
                    'text-lg font-medium text-gray-900',
                    children: [
                      const Text('Starter '),
                      const Style('sr-only', child: Text('Plan')),
                    ],
                  ),
                  const Style(
                    'mt-2 text-pretty text-gray-700',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                    ),
                  ),
                  Style(
                    'mt-2 sm:mt-4',
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Style(
                          'text-3xl font-bold text-gray-900 sm:text-4xl',
                          display: DisplayType.inline,
                          child: Text(r'$20 '),
                        ),
                        const Style(
                          'text-sm font-medium text-gray-700',
                          display: DisplayType.inline,
                          child: Text('/month'),
                        ),
                      ],
                    ),
                  ),
                  const Style(
                    'mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6',
                    cursor: SystemMouseCursors.click,
                    child: Text('Get Started'),
                  ),
                ],
              ),
              Style(
                'p-6 sm:px-8',
                children: [
                  const Style(
                    'text-lg font-medium text-gray-900 sm:text-xl',
                    child: Text("What's included:"),
                  ),
                  Style(
                    'mt-2 space-y-2 sm:mt-4',
                    children: [
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style('text-gray-700', child: Text('10 users')),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('2GB of storage'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Email support'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-red-700',
                            child: CurrentColorIcon(_xSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Help center access'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-red-700',
                            child: CurrentColorIcon(_xSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Phone support'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-red-700',
                            child: CurrentColorIcon(_xSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Community access'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
          Style(
            'divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs',
            children: [
              Style(
                'p-6 sm:px-8',
                children: [
                  Style(
                    'text-lg font-medium text-gray-900',
                    children: [
                      const Text('Pro '),
                      const Style('sr-only', child: Text('Plan')),
                    ],
                  ),
                  const Style(
                    'mt-2 text-pretty text-gray-700',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                    ),
                  ),
                  Style(
                    'mt-2 sm:mt-4',
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Style(
                          'text-3xl font-bold text-gray-900 sm:text-4xl',
                          display: DisplayType.inline,
                          child: Text(r'$30 '),
                        ),
                        const Style(
                          'text-sm font-medium text-gray-700',
                          display: DisplayType.inline,
                          child: Text('/month'),
                        ),
                      ],
                    ),
                  ),
                  const Style(
                    'mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6',
                    cursor: SystemMouseCursors.click,
                    child: Text('Get Started'),
                  ),
                ],
              ),
              Style(
                'p-6 sm:px-8',
                children: [
                  const Style(
                    'text-lg font-medium text-gray-900 sm:text-xl',
                    child: Text("What's included:"),
                  ),
                  Style(
                    'mt-2 space-y-2 sm:mt-4',
                    children: [
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style('text-gray-700', child: Text('20 users')),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('5GB of storage'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Email support'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Help center access'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-red-700',
                            child: CurrentColorIcon(_xSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Phone support'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-red-700',
                            child: CurrentColorIcon(_xSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Community access'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
          Style(
            'divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs',
            children: [
              Style(
                'p-6 sm:px-8',
                children: [
                  Style(
                    'text-lg font-medium text-gray-900',
                    children: [
                      const Text('Enterprise '),
                      const Style('sr-only', child: Text('Plan')),
                    ],
                  ),
                  const Style(
                    'mt-2 text-pretty text-gray-700',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                    ),
                  ),
                  Style(
                    'mt-2 sm:mt-4',
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Style(
                          'text-3xl font-bold text-gray-900 sm:text-4xl',
                          display: DisplayType.inline,
                          child: Text(r'$100 '),
                        ),
                        const Style(
                          'text-sm font-medium text-gray-700',
                          display: DisplayType.inline,
                          child: Text('/month'),
                        ),
                      ],
                    ),
                  ),
                  const Style(
                    'mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6',
                    cursor: SystemMouseCursors.click,
                    child: Text('Get Started'),
                  ),
                ],
              ),
              Style(
                'p-6 sm:px-8',
                children: [
                  const Style(
                    'text-lg font-medium text-gray-900 sm:text-xl',
                    child: Text("What's included:"),
                  ),
                  Style(
                    'mt-2 space-y-2 sm:mt-4',
                    children: [
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style('text-gray-700', child: Text('50 users')),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('20GB of storage'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Email support'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Help center access'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Phone support'),
                          ),
                        ],
                      ),
                      Style(
                        'flex items-center gap-1',
                        children: [
                          Style(
                            'size-5 text-indigo-700',
                            child: CurrentColorIcon(_checkSvg),
                          ),
                          const Style(
                            'text-gray-700',
                            child: Text('Community access'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Original HTML

<div class="max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-stretch md:grid-cols-3 md:gap-8">
    <div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
      <div class="p-6 sm:px-8">
        <h2 class="text-lg font-medium text-gray-900">
          Starter
          <span class="sr-only">Plan</span>
        </h2>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>

        <p class="mt-2 sm:mt-4">
          <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> $20 </strong>

          <span class="text-sm font-medium text-gray-700">/month</span>
        </p>

        <a
          class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
          href="#"
        >
          Get Started
        </a>
      </div>

      <div class="p-6 sm:px-8">
        <p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>

        <ul class="mt-2 space-y-2 sm:mt-4">
          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> 10 users </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> 2GB of storage </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Email support </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-red-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

            <span class="text-gray-700"> Help center access </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-red-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

            <span class="text-gray-700"> Phone support </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-red-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

            <span class="text-gray-700"> Community access </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
      <div class="p-6 sm:px-8">
        <h2 class="text-lg font-medium text-gray-900">
          Pro
          <span class="sr-only">Plan</span>
        </h2>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>

        <p class="mt-2 sm:mt-4">
          <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> $30 </strong>

          <span class="text-sm font-medium text-gray-700">/month</span>
        </p>

        <a
          class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
          href="#"
        >
          Get Started
        </a>
      </div>

      <div class="p-6 sm:px-8">
        <p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>

        <ul class="mt-2 space-y-2 sm:mt-4">
          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> 20 users </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> 5GB of storage </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Email support </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Help center access </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-red-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

            <span class="text-gray-700"> Phone support </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-red-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

            <span class="text-gray-700"> Community access </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
      <div class="p-6 sm:px-8">
        <h2 class="text-lg font-medium text-gray-900">
          Enterprise
          <span class="sr-only">Plan</span>
        </h2>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>

        <p class="mt-2 sm:mt-4">
          <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> $100 </strong>

          <span class="text-sm font-medium text-gray-700">/month</span>
        </p>

        <a
          class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
          href="#"
        >
          Get Started
        </a>
      </div>

      <div class="p-6 sm:px-8">
        <p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>

        <ul class="mt-2 space-y-2 sm:mt-4">
          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> 50 users </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> 20GB of storage </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Email support </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Help center access </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Phone support </span>
          </li>

          <li class="flex items-center gap-1">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-5 text-indigo-700"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>

            <span class="text-gray-700"> Community access </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>