Stock Ticker Strip

<div
  class="ws-stock-widget flex items-stretch divide-x overflow-x-auto rounded-2xl border"
  style="
    --ws-stock-widget-bg: oklch(0.98 0.005 75);
    --ws-stock-widget-text: oklch(0.25 0.02 75);
    --ws-stock-widget-text-soft: oklch(0.45 0.015 75);
    --ws-stock-widget-text-muted: oklch(0.6 0.01 75);
    --ws-stock-widget-border: oklch(0.9 0.01 75);
    --ws-stock-widget-positive: oklch(0.55 0.15 155);
    --ws-stock-widget-negative: oklch(0.55 0.15 25);
    background: var(--ws-stock-widget-bg);
    color: var(--ws-stock-widget-text);
    border-color: var(--ws-stock-widget-border);
    divide-color: var(--ws-stock-widget-border);
  "
>
  <!-- Stock 1 -->
  <div class="flex flex-1 items-center gap-3 px-5 py-3.5">
    <div>
      <p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">AAPL</p>
      <p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Apple</p>
    </div>
    <div class="ml-auto text-right">
      <p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$178.72</p>
      <p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+1.33%</p>
    </div>
  </div>

  <!-- Stock 2 -->
  <div class="flex flex-1 items-center gap-3 px-5 py-3.5">
    <div>
      <p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">MSFT</p>
      <p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Microsoft</p>
    </div>
    <div class="ml-auto text-right">
      <p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$415.30</p>
      <p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+0.87%</p>
    </div>
  </div>

  <!-- Stock 3 -->
  <div class="flex flex-1 items-center gap-3 px-5 py-3.5">
    <div>
      <p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">GOOGL</p>
      <p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Alphabet</p>
    </div>
    <div class="ml-auto text-right">
      <p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$153.48</p>
      <p class="text-xs font-semibold" style="color: var(--ws-stock-widget-negative)">-0.52%</p>
    </div>
  </div>

  <!-- Stock 4 -->
  <div class="flex flex-1 items-center gap-3 px-5 py-3.5">
    <div>
      <p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">TSLA</p>
      <p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Tesla</p>
    </div>
    <div class="ml-auto text-right">
      <p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$248.91</p>
      <p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+2.14%</p>
    </div>
  </div>

  <!-- Stock 5 -->
  <div class="flex flex-1 items-center gap-3 px-5 py-3.5">
    <div>
      <p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">NVDA</p>
      <p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">NVIDIA</p>
    </div>
    <div class="ml-auto text-right">
      <p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$892.15</p>
      <p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+3.21%</p>
    </div>
  </div>
</div>