JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<div>
<div>Many others div</div>
<div>Many others div</div>
<div>Many others div</div>
<div>Many others div</div>

<div><div><div><div><div><div>


<div id="folha">
        <div class="container-print center">
            <div class="color-black">
                MY TEST
            </div>
            <div class="paciente color-black">
                <div><strong class="ng-binding">THATIANA NUNES ALMEIDA</strong></div>
                <div class="medplano">
                 <div class="ng-binding">Sem Pref</div>
                 <div class="ng-binding">IRB-APOSENTADOS/EX COLABORADORES</div>
                </div>
                <div class="medplano">
                  <div class="ng-binding">15/01/182018 20:46:13</div>
                  <div>TOTEM</div>
                  <div class="ng-binding">Matr:00000</div>
                </div>
            </div>
            <div class="color-black">
                <span class="circle">TRAN</span>
                <span class="circle">REC</span>
            </div>
        </div>    
        <div class="container-obs color-black">
          <div class="ng-binding"></div>      
          <div class="ng-binding">Rx e Procedimentos no receituário com CID. Fratura podemos cobrar  Consulta.Recepção: Fratura podemos cobrar Consulta.Densitometria óssea com autorização via fax 2240.1621.Procedimentos acima 300 chs, necessita de autorização. Paciente deverá apresentar lâmina de pagamento. Observar sempre validade da carteira.
          </div>      
        </div>    
 </div>

<div><div></div></div></div></div>
</div>

CSS

@media screen {
    #printSection{
        display: none;
    }
    .container-obs{
         display: flex;
         flex-direction: column;
    }
    .circle{
        border-radius:50%; 
        border:solid black 1px;
        padding:5px
    }
    .container-print {
         display: flex;
         padding-top:10px;
    }
    .container-print div:last-child {
      margin-left: auto;
    }
    .center {
     align-items: center;
    }
    .medplano{
         display: flex;
    }
    .medplano>div{
         margin-right: 30px;
    }
    .paciente {
         margin-left: 15px; 
    }
 }
 @media print {

    *{display: none;}
    body > #folha, body > #folha *{
      display:block;
    }

    .circle{
        border-radius:50%; 
        border:solid black 1px;
        padding:5px;
    }

    @page { size: auto;  margin: 0mm; }
    .container-obs{
         display: flex;
         flex-direction: column;
    }
    .container-print {
         display: flex;
         padding-top:10px;
    }
    .container-print div:last-child {
      margin-left: auto;
    }
    .center {
     align-items: center;
    }
    .medplano{
         display: flex;
    }
    .medplano>div{
         margin-right: 30px;
    }
    .paciente {
         margin-left: 15px; 
    }
 }

JavaScript

$(function() {
 window.print();
});