JSFiddle - React, Tailwind, and code Playground

by sol_b

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css">
<div class="panel">
  <div class="panel-block">
    <div class="pricing">
      <div class="table__wrapper">
        <table class="table is-bordered pricing__table is-fullwidth">
          <tbody>
            <tr>
              <td>Per Person Cost</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
            <tr>
              <td>
                Extra Person
                <br> (> 12 yrs)
              </td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
            <tr>
              <td>
                Extra Child
                <br> (> 12 yrs)
              </td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
            <tr>
              <td>Total Cost</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

CSS

.table__wrapper {
  overflow-x: auto;
}

.pricing {
  width: 100%;
}