JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<table class="layout">
    <tbody>
        <tr>
            <td>
                <table class="container">
                    <tbody>
                        <tr>
                            <td>
                                <!-- Header -->
                                <table class="header">
                                    <tbody>
                                        <tr>
                                            <td class="header-title">№ 123-456</td>
                                            <td class="header-logo">
                                                <a href="https://lk.ekspress-l.ru" target="_blank"><img src="https://lk.ekspress-l.ru/_nuxt/img/logo.995160f.svg"></a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                
                                <!-- Info -->
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="text-sm">В личном кабинете вы можете посмотреть информацию о заказе, а также оплатить его.</td>
                                            <td>
                                                <a class="btn" href="#">Открыть заказ</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            
                                <!-- Content -->
                                <table class="list">
                                    <tbody>
                                        <tr>
                                            <td class="list-title" colspan="2">Параметры</td>
                                        </tr>
                                        <tr>
                     ...

SCSS

.layout {
  font-family: 'Montserrat', 'Roboto' , '-apple-system' , 'Blinkmacsystemfont' , 'Segoe Ui' , 'Helvetica Neue' , 'Srial' , 'Noto Sans' , sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  color: #15182c;
  padding: 0 1rem;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  box-sizing: border-box;
  width: 100%;
}

hr {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid #e9ecef;
}

a {
  text-decoration: none;
  color: #15182c;
  
  &:hover {
    color: #b6222a;
  }
}

.btn {
  white-space: nowrap;
  display: inline-block;
  padding: .375rem .75rem;
  border-radius: 5px;
  color: #fff !important;
  background-color: #b6222a;
  border-color: #ab2027;
  font-weight: 600;
}

.text-sm {
  font-size: .7875rem;
  line-height: 1.2;
}

.container {
  max-width: 600px;
  margin: 1rem auto;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  box-shadow: 0 0.06rem 10px rgba(21, 24, 44, .1);
  
  & > tbody {
    & > tr {
      & > td {
        & > table {
          padding: .7rem 1rem;
        }
        & > table:not(:last-child) {
          border-bottom: 1px solid #e9ecef;
        }
      }
    }
  }
}

.header {
  td {
    vertical-align: middle;   
  }
  .header-title {
    font-weight: 500;
    font-size: 1.5rem;
  }
  .header-logo {
    text-align: right;
    
    img {
      width: 120px;
    }
  }
}

.footer {
  text-align: center;
}

.list {
  td {
    vertical-align: top;
  }
  tr:not(:last-child) {
    td {
      padding-bottom: .25rem;
    }
  }
  .list-title {
    font-weight: bold;
    font-size: 1.05rem;
  }
  .list-label {
    width: 40%;
    color: #86919a;
  }
}