Selectable Card

Card can be selected.

html

<label class="selcard" style="--c:#A8E6C1;">
  <input type="checkbox" class="selcard__input" checked>
  <span class="selcard__box">
    <span class="selcard__check" aria-hidden="true">✓</span>
    <span class="selcard__text">
      <strong>Standard plan</strong>
      <span class="selcard__body">For small teams getting started.</span>
    </span>
  </span>
</label>
<style>
.selcard { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; cursor: pointer; }
.selcard__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.selcard__box { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid #24143022; border-radius: 10px; padding: 14px; }
.selcard__check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #24143033; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; }
.selcard__input:checked + .selcard__box { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, #FAF7F2); }
.selcard__input:checked + .selcard__box .selcard__check { background: var(--c); border-color: var(--c); color: #241430; }
.selcard__input:focus-visible + .selcard__box { outline: 2px solid var(--c); outline-offset: 2px; }
.selcard__body { display: block; font-size: 12px; opacity: .75; }
</style>

tailwind

<label class="selcard-tw block font-sans text-[14px] text-[#241430] max-w-xs cursor-pointer" style="--c:#A8E6C1;">
  <input type="checkbox" class="selcard-tw__input absolute opacity-0 w-px h-px" checked>
  <span class="selcard-tw__box flex gap-2.5 items-start border-[1.5px] border-[#24143022] rounded-[10px] p-3.5">
    <span class="selcard-tw__check w-[18px] h-[18px] rounded-[5px] border-[1.5px] border-[#24143033] flex-none flex items-center justify-center text-xs text-transparent">✓</span>
    <span>
      <strong class="block">Standard plan</strong>
      <span class="block text-xs opacity-75">For small teams getting started.</span>
    </span>
  </span>
</label>
<style>
.selcard-tw__input:checked + .selcard-tw__box { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, #FAF7F2); }
.selcard-tw__input:checked + .selcard-tw__box .selcard-tw__check { background: var(--c); border-color: var(--c); color: #241430; }
</style>

react

import { useState } from "react";

export function SelectableCard({
  title = "Standard plan",
  body = "For small teams getting started.",
  selected: initialSelected = true,
  color = "#A8E6C1",
}) {
  const [selected, setSelected] = useState(initialSelected);
  return (
    <label style={{ display: "block", font: "14px system-ui, sans-serif", color: "#241430", maxWidth: 260, cursor: "pointer" }}>
      <input type="checkbox" checked={selected} onChange={() => setSelected((v) => !v)} style={{ position: "absolute", opacity: 0, width: 1, height: 1 }} />
      <span style={{
        display: "flex", gap: 10, alignItems: "flex-start", borderRadius: 10, padding: 14,
        border: "1.5px solid " + (selected ? color : "#24143022"),
        background: selected ? color + "29" : "transparent",
      }}>
        <span style={{
          width: 18, height: 18, borderRadius: 5, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12,
          border: "1.5px solid " + (selected ? color : "#24143033"),
          background: selected ? color : "transparent", color: selected ? "#241430" : "transparent",
        }}>✓</span>
        <span>
          <strong style={{ display: "block" }}>{title}</strong>
          <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{body}</span>
        </span>
      </span>
    </label>
  );
}