JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="block">
  <p>Donec id elit non mi porta gravida at eget metus. <br>Nulla vitae elit libero, a pharetra augue. <br>Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.</p>
  <table class="block-table">
    <tr>
      <td><div class="product">Товар</div></td>
      <td><div class="product">Товар</div></td>
      <td><div class="product">Товар</div></td>
    </tr>
  </table>
</div>

SCSS

html, body {
  height: 100%;
  background-color: green;
}

.block {
  display: inline-block;
  padding: 20px;
  background-color: #eee;
  
  &-table {
    margin-top: 20px;
    border-collapse: separate;
    
    td:first-child {
      .product {
        margin-left: 0;
      }
    }
  }
  
  .product {
    padding: 20px 30px;
    margin: 0 10px;
    background: blue;
  }
}