WordPressで表示される簡単そうなデザインを再現した

<div className="p-4">
  <div className="space-y-12 ">

    <div className="relative step-item">
      <div className="flex items-center space-x-4">
        <div className="step-number flex flex-col items-center justify-center text-center bg-black text-white rounded-full w-12 h-12">
          <span className="text-xs">STEP</span>
          <span className="text-xl">1</span>
        </div>
        <div className="text-lg font-bold">Do：今日やること</div>
      </div>
      <div className="mt-4 ml-16">
        <ul>
          <li>寝る前にリストアップしたタスクにしたがって淡々とDone✅していく</li>
          <li>今日になって気分が乗らない気がしたら潔く持ち越しちゃう✌</li>
        </ul>
      </div>
    </div>
</div>

    import '../../../css/customize.css'

    .step-number {
        position: relative;
        z-index: 10;

    }
    /* 各ステップアイテムに点線を描画 */
    .step-item::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 23px;
        height: calc(100% + 50px); /* 下のマージンを含むように調整 */
        border-left: 1px dashed #c8c8c880;
    }

    /* 最後のステップアイテムの点線を非表示 */
    .last-step::before {
        display: none;
    }