Swipe

Horizontal/vertical gesture.

html

<div class="rsp-sw-stage" data-direction="left">
  <div class="rsp-sw-action" style="background:#F5C2E0;">Delete</div>
  <div class="rsp-sw-card">Swipe left to reveal</div>
  <p class="rsp-sw-caption">Resting &mdash; a horizontal drag gesture</p>
</div>
<style>
.rsp-sw-stage { position: relative; width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; overflow: hidden; }
.rsp-sw-action { position: absolute; top: 16px; right: 16px; bottom: 40px; width: 70px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: #241430; }
[data-direction="right"] .rsp-sw-action { right: auto; left: 16px; }
.rsp-sw-card { position: relative; background: #fff; border: 1px solid #24143022; border-radius: 8px; padding: 16px; text-align: center; color: #241430; transform: translateX(0); }
[data-direction="left"] .rsp-sw-card--swiped { transform: translateX(-70px); }
[data-direction="right"] .rsp-sw-card--swiped { transform: translateX(70px); }
.rsp-sw-caption { margin: 10px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .rsp-sw-card { transition: transform 300ms ease-out; }
}
</style>

tailwind

<div class="relative w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 overflow-hidden" data-direction="left">
  <div class="tw-sw-action absolute top-4 right-4 bottom-10 w-[70px] rounded-lg grid place-items-center font-bold text-[#241430]" style="background:#F5C2E0;">Delete</div>
  <div class="tw-sw-card relative bg-white border border-[#24143022] rounded-lg p-4 text-center text-[#241430]">Swipe left to reveal</div>
  <p class="mt-2.5">Resting &mdash; a horizontal drag gesture</p>
</div>
<style>
[data-direction="right"] .tw-sw-action { right: auto; left: 16px; }
[data-direction="left"] .tw-sw-swiped { transform: translateX(-70px); }
[data-direction="right"] .tw-sw-swiped { transform: translateX(70px); }
@media (prefers-reduced-motion: no-preference) {
  .tw-sw-card { transition: transform 300ms ease-out; }
}
</style>

react

export function Swipe({
  swiped = false,
  direction = "left",
  duration = 300,
  accent = "#F5C2E0",
}) {
  const offset = direction === "left" ? -70 : 70;
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: 16, bottom: 40, [direction === "left" ? "right" : "left"]: 16, width: 70, borderRadius: 8, display: "grid", placeItems: "center", fontWeight: 700, color: "#241430", background: accent }}>Delete</div>
      <div className="card" style={{ position: "relative", background: "#fff", border: "1px solid #24143022", borderRadius: 8, padding: 16, textAlign: "center", color: "#241430", transform: swiped ? `translateX(${offset}px)` : "translateX(0)" }}>
        Swipe {direction} to reveal
      </div>
      <p style={{ margin: "10px 0 0" }}>{swiped ? "Revealed" : "Resting"} &mdash; a horizontal drag gesture</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .card { transition: transform ${duration}ms ease-out; }
        }
      `}</style>
    </div>
  );
}