JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

boxで１まとまり
font-weightなどは調整
<div class="box">
  <div class="box_left">
    販促
  </div>
  <div class="box_right">
    <div class="box_right_first">
     <h3>
      １、販促活動
    </h3>
     <p>
       農家さんへのfarm watchの営業、販売促進を行います<br>
大崎電気からPRツール（パンフレット、提案資料）など支給します
     </p>
    </div>
      <div class="box_right_second">
     <h3>
      2. 定期的な販促会議
    </h3>
     <p>
       定期的に販促活動についてお打ち合わせを行います
     </p>
    </div>
  </div>
</div>


<div class="box">
  <div class="box_left">
    契約
  </div>
  <div class="box_right">
    <div class="box_right_first">
     <h3>
      3. お客様からお問合せ対応
    </h3>
     <p>
       お客様からのお問合せに対応します
     </p>
    </div>
      <div class="box_right_second">
     <h3>
      4. farm watch設置作業
    </h3>
     <p>
       設置作業を行います。お試し期間が3ヶ月ほどあります。
     </p>
    </div>
    <div class="box_right_third">
     <h3>
      5. 契約締結、更新
    </h3>
     <p>
       契約を締結します。
     </p>
    </div>
  </div>
</div>


<div class="box">
  <div class="box_left">
    サポート
  </div>
  <div class="box_right">
    <div class="box_right_first">
     <h3>
      6. 無料駆けつけサービス
    </h3>
     <p>
      端末やサービスに不具合が生じた場合は、迅速に対応、駆けつけます。
     </p>
    </div>
      <div class="box_right_second">
     <h3>
      7. 専門スタッフによるサポート
    </h3>
     <p>
       お客様の地域地域で専門のパートナー会社がお客様各々をご担当いたします。
設置～メンテナンス、ご要望、ご不明な点もパートナー会社にお聞きください。
     </p>
    </div>
    <div class="box_right_third">
     <h3>
      8. 定期メンテナンス
    </h3>
     <p>
       定期的にその地域ごとのパートナー会社がお伺いし、装置のメンテナンスを行います。
その他ご要望、ご不明な点事項にも丁寧且つ迅速に対応いたします。
     </p>
    </div>
  </div>
</div>

CSS

.box {
  width: 960px;
  display: flex;
  border: 1px solid #DCDEE3;
  padding: 30px 0;
  margin-bottom: 30px;
}

  .box_left {
    width: 25%;
    border-right: 1px solid #DCDEE3;
    margin-left: 40px;
  }
  
  .box_right {
    width: 75%;
    margin-left: 40px;
  }