JSFiddle - React, Tailwind, and code Playground

by sabbin

HTML

<div class='legal'>
  <div class='legal__section'>
    <h1>
      Distance Selling Contract
    </h1>
    <p>
      <h6>
        WATSONS DISTANCE SALES AGREEMENT
      </h6>
    </p>
  </div>

  <div class='legal__section'>
    <p>
      <strong>Date</strong>
        <e2-time-stamp format='DD.MM.YYYY HH:mm:ss' />
    </p>
  </div>

  <div class='legal__section'>
    <p>
      <h6>
        SIDES
      </h6>
    </p>
    <p>
       <strong>(1)</strong> AS Watson Beauty and Care Products Trade Inc. (""Watsons / Seller""), whose headquarters is in Saray Mahallesi, Site Yolu Caddesi, Anel İş Merkezi, No: 5/4, Kat: 4-5, Ümraniye, İstanbul;
    </p>
  </div>
  
  <div class='legal__section'>
   <p>
     Seller Phone: 0216 635 60 00
   </p>
   <p>
     Vendor Fax: 0216 635 68 09
   </p>
   <p>
     Dealer Product Return address: Orhanlı Orta Mahallesi, Atayolu Caddesi, Öztaş Sokak, No: 4/1, Tuzla, İstanbul.
   </p>
   <p>
   Mersis No: 0212037036401655
   </p>
  </div>
  
  <div class='legal__section'>
    <p>
    <strong>(2)</strong> Internet user (""Buyer"") who makes purchases from the website or mobile application serving at http://www.watsons.com.tr.
    </p>
  </div>
  
  <div class='legal__section'>
   <p>
     Receiver Phone: <e2-text-content name='cart.data.deliveryAddress.phone'/>
   </p>
   <p>
     Buyer Address: <e2-text-content name='cart.data.deliveryAddress.formattedAddress'/>
   </p>
   <p>
     Recipient Email: <e2-text-content name='cart.data.deliveryAddress.email'/>
   </p>
  </div>
  
  <div class='legal__section'>
    <p>
      <h6><span>1</span>SUBJECT</h6>
    </p>
    <p>
     The subject of this Agreement is the determination of the rights and obligations of the parties in accordance with the provisions of the legislation regarding the sale and delivery of the following products / products ordered through the Web Site at http://www.watsons.com.tr/ owned by Watsons and the mobile application.
    </p>
  </div>
  
  <div class='legal__section'>
  ...

SCSS

.legal {
        display: flex;
        flex-direction: column;

        &--section {
            margin-bottom: 1em;

            p {
                margin-block-start: 1em;
                margin-block-end: 1em;
            }

            span {
                margin-right: 1em;
            }
            
            ul {
                list-style-type: circle;
            }
            
            h1 {
              font-size: 35px;
              font-weight: 700;
            }
            
            h6 {
              font-weight: 700;
            }
        }
    }