JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<header>
    <h1>header</h1>
    
</header>

<section>
    <div class="leftside">leftside</div>
    <div class="content">
        
        content
        <p>control print</p>
        <div  class="btn"  onclick="print()"><i class="icon-print"></i>Print</div>
        
    
    </div>
    <div class="rightside">rightside</div>
    <div class="clearfix"></div>    
</section>

<footer>
    <h1>footer</h1>
    
</footer>

CSS

header{
    background-color:green;
    padding:20px;
}
.leftside{
    background-color:yellow;
    float:left;
    width:20%;
    height:300px;
}

.content{
    float:left;
    width:60%;
    height:300px;
    background-color:cyan;
    position:relative;
}
.rightside{
    width:20%;
    float:left;
    height:300px;
    background-color:blue;
}

footer{
    background-color:black;
    color:#fff;
}
.clearfix{
    clear:both;
}
.btn{
    padding:10px;
    border:1px solid green;
    color:red;
    font-size:20pt;
    border:1px solid #ddd;
    display:inline-block;
    background-color:#fff;
    float:right;
    margin:20px;
    cursor:pointer;
    padding:20px;
}
@media print{
    header{display:none;}
    footer{display:none;}
   .leftside{display:none;}
   .rightside{display:block;}
   p{color:red;font-size:100px;}
   .btn{position:absolute;top:10px;right:20px;}
 }

JavaScript

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