JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<div style="font-family: Arial, sans-serif; padding: 16px; background: #fff; border: 1px solid #ddd; border-radius: 12px; text-align: center;"> 
  <h3 style="margin-top: 0; color: #333;">
    <img src="https://files.workflow-automation.podio.com/flow-5951-807885-18085-workflow.png" alt="workflow" style="width: 50px; vertical-align: middle; margin-right: 8px;">
    Quy trình các bước Duyệt Nội Dung bài và Quảng cáo
  </h3>

  <div style="display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 24px; overflow-x: auto; padding: 8px;">

    <!-- Lên DS dự kiến -->
    <div style="text-align: center; min-width: 120px;">
      <div style="display: flex; justify-content: center; gap: 4px; margin-bottom: 4px;">
        <img src="https://img.icons8.com/fluency/48/to-do.png" title="Agency" style="width:36px;">
        <img src="https://img.icons8.com/color/48/user.png" title="Client" style="width:20px;">
      </div>
      <div>Lên DS dự kiến</div>
    </div>

    <!-- Arrow -->
    <div style="flex-shrink: 0;">
      <img src="https://files.workflow-automation.podio.com/flow-5951-807885-18746-rightarrow.png" alt="arrow" style="width: 36px; display: block;">
    </div>

    <!-- Soạn => Duyệt Chủ đề -->
    <div style="text-align: center; min-width: 120px;">
      <div style="display: flex; justify-content: center; gap: 4px; margin-bottom: 4px;">
        <img src="https://files.workflow-automation.podio.com/flow-5951-807885-62067-idea.png" title="Agency" style="width:36px;">
        <img src="https://img.icons8.com/color/48/user.png" title="Client" style="width:20px;">
      </div>
      <div>Soạn ⇒ Duyệt Chủ đề</div>
    </div>

    <div style="flex-shrink: 0;">
      <img src="https://files.workflow-automation.podio.com/flow-5951-807885-18746-rightarrow.png" style="width: 36px;">
    </div>

    <!-- Soạn => Duyệt Nội dung -->
    <div style="text-align: center; min-width: 120px;">
      <div...