Interaction

User action and resulting system response.

html

<div class="uif-int-stage" data-action="click">
  <div class="uif-int-user">User clicks the star</div>
  <span class="uif-int-star" style="color:#F5C2E0;">&#9733;</span>
  <div class="uif-int-arrow">&darr;</div>
  <div class="uif-int-response">System responds: saved to favourites</div>
</div>
<style>
.uif-int-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }
.uif-int-user { margin-bottom: 6px; text-transform: capitalize; }
.uif-int-star { font-size: 28px; color: #24143033; }
.uif-int-star--on { color: inherit; }
.uif-int-arrow { margin: 6px 0; opacity: .5; }
.uif-int-response { visibility: hidden; font-weight: 600; color: #241430; }
.uif-int-response--visible { visibility: visible; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center" data-action="click">
  <div class="mb-1.5 capitalize">User clicks the star</div>
  <span class="text-3xl" style="color:#24143033;">&#9733;</span>
  <div class="my-1.5 opacity-50">&darr;</div>
  <div class="tw-int-response font-semibold text-[#241430]">System responds: saved to favourites</div>
</div>
<style>
.tw-int-response { visibility: hidden; }
.tw-int-visible { visibility: visible; }
</style>

react

export function Interaction({
  actionType = "click",
  triggered = false,
  accent = "#F5C2E0",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa", textAlign: "center" }}>
      <div style={{ marginBottom: 6, textTransform: "capitalize" }}>User {actionType}s the star</div>
      <span style={{ fontSize: 28, color: triggered ? accent : "#24143033" }}>&#9733;</span>
      <div style={{ margin: "6px 0", opacity: .5 }}>&darr;</div>
      <div style={{ visibility: triggered ? "visible" : "hidden", fontWeight: 600, color: "#241430" }}>System responds: saved to favourites</div>
    </div>
  );
}