JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<div class="container">

  <h1 class="h1_center bold ">@PolicyNumber SAYLI ŞƏHADƏTNAMƏYƏ ƏLAVƏ OLUNAN VƏ </h1>
  <h1 class="h1_center bold padding_bottom">ONUN AYRILMAZ HİSSƏSİ SAYILAN ƏLAVƏ № @PolicyNumber / @AddendumNumber</h1>


  <table class="table_main padding_bottom">
    <tr>
      <td class="td_first"><span class="">TARİX:</span></td>
      <td colspan="2">@PolicyAddendumDate</td>
    </tr>
    <tr>
      <td class="td_first"><span class="">SIĞORTAÇI:</span></td>
      <td colspan="2">
        <span class="bold">«Atəşgah Həyat» Sığorta Şirkəti ASC</span>
        <br />
        <span>Azərbaycan Respublikası, AZ1110, C. Hacıbəyli küç. 218</span>
      </td>
    </tr>
    <tr>
      <td class="td_first"><span class="">SIĞORTALI:</span></td>
      <td colspan="2">
        <span class="bold">@HolderName</span>
        <br />
        <span>Ünvan: @HolderAddress</span>

      </td>
    </tr>
    <tr>
      <td class="td_first"><span class="">SIĞORTA OLUNAN:</span></td>
      <td colspan="2">
        <span class="bold">@InsuredPersonName</span>
        <br />
        <span>Ünvan: @InsuredAddress</span>
      </td>
    </tr>

    <tr>
      <td class="td_first"><span class="">ŞƏHADƏTNAMƏNİN MÜDDƏTİ:</span></td>
      <td colspan="2">
        <span>Yerli vaxtla @StartDate-ci il saat 00:01-dən @EndDate-ci il saat 24:00-dək</span>
      </td>
    </tr>

    <tr>
      <td class="td_first"><span class="">ƏLAVƏ:</span></td>
      <td colspan="2">
        <span class="padding_bottom">Bu əlavə ilə razılaşdırılır ki @PolicyNumbersaylı sığorta Şəhadətnaməsinə aşağıdakı dəyişikliklər edilir:</span><br />
        <span>@PolicyAddendumDate-cı il tarixindən etibarən bu sığorta şəhadətnamə üzrə sığorta haqlarının ödənişləri dayandırılmaqla sığorta şəhadətnaməsi qüvvədə qalır.</span>
        <br/>
        <br/>
        <span class="bold ">1.Sığorta məbləğı:</span>
        <br />
        <br />
        <span>Sığorta olunanın sığorta müddətinin sonunadək yaşaması riski üzrə:
    ...

CSS

* {
  font-size: 11px;
  font-family: Arial;
}

.container {
  width: 700px;
}

p {
  font-size: 10px;
}

.bold {
  font-weight: bold;
}

.padding_bottom {
  padding-bottom: 6px;
}

.h1_center {
  text-align: center;
  font-size: 12px;
}

.h1_right {
  text-align: right;
  font-size: 12px;
}

table td {
  vertical-align: top;
}

table.table_main {
  width: 700px;
}

table.table_main td {
  padding-bottom: 9px;
}

table.table_main td.small_padd {
  padding-bottom: 4px;
}

td.td_first {
  width: 200px;
}

.table_flow {
  border-collapse: collapse;
  border: 0.5px solid black;
}

.table_flow td {
  border: 0.5px solid black;
  padding: 3px;
}