JSFiddle - React, Tailwind, and code Playground
HTML
<div class="print_wrapper">
<div class="print_options">
<a href="#" onclick="self.close()"><i class="icon-remove"></i> Close</a>
|
<a href="{$base_url}residential-lettings/suppliers/generate-letter-pdf/supplier/{$supplier.id}/letter/{$letter.id}"><i class="icon-copy"></i> PDF</a>
|
<a href="#" onclick="window.print()"><i class="icon-print"></i> Print</a>
</div>
<div class="print_page">
<div class="print_header">
<div class="print_header_logo">
<h1 class="showhouse-text">Laagro</h1>
</div>
<div class="print_header_address">
<p>
New Somewhere House <br>
123 Somewhere Avenue <br>
Newry <br>
Down <br>
BT35 ABC <br>
UK
</p>
</div>
</div>
<div class="print_content">
<p>Dear Bob</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae...
CSS
.print_wrapper{
width: 21cm;
margin: auto;
}
.print_options{
float: right;
}
.print_page{
background: white;
font-size: 12pt;
float: left;
padding: 10px;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.print_header{
float: left;
clear: both;
width: 100%;
}
.print_header_logo{
float: left;
}
.print_header_address{
float: right;
text-align: right;
font-size: 0.7em;
margin: 1.5em 0 0 0;
}
.print_content{
float: left;
font-size: 0.9em;
margin: 1em 0 0 0;
}
.print_footer{
float: left;
width: 100%;
margin: 1em 0 0 0;
font-size: 0.9em;
border-top: 1px solid #000;
}
.print_footer_left{
float: left;
}
.print_footer_right{
float: right;
text-align: right;
}
@page {
size: A4;
margin: 0;
}
@media print{
.print_options{display: none;}
.print_wrapper{width: 90%;}
.print_page{border: none; box-shadow: none;}
}