JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<header>
    <h1>header</h1>
    <div class="print" onclick="print()">print</div>
</header>
<section>
    <div class="pull-left">1</div>
     <div class="pull-left">2</div>
     <div class="pull-left">3</div>
     <div class="pull-left">4</div>
     <div class="pull-left noprint">5</div>
     <div class="pull-left">6</div>
     <div class="pull-left">7</div>
     <div class="pull-left">8</div>
     <div class="pull-left">9</div>
     <div class="pull-left">10</div>
     <div class="pull-left noprint">11</div>
    <div class="pull-left">12</div>
     <div class="pull-left">13</div>
     <div class="pull-left">14</div>
     <div class="pull-left">15</div>
    <div class="clearfix"></div>
</section>
<footer>
    <h1>footter</h1>
</footer>

CSS

.pull-left {
    border: 1px solid #DDDDDD;
    color: #FF0000;
    float: left;
    font-size: 20px;
    width: 20%;
}
header {
    position: relative;
}
.print {
    border: 1px solid #FF0000;
    display: inline-block;
    left: 520px;
    padding: 10px;
    position: absolute;
    top: 0;
}
@media print {
header {
    display: none;
}
footer {
    display: none;
}
.noprint {
    display: none;
}
section {
    display: block;
}
.pull-left {
    border: 1px solid #FFD700;
    color: #FF0000;
}
}

JavaScript

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