JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div class="wrapper_builder">
 <div class="page_layout" style="transform: scale(0.693569, 0.693569);" >
 </div>
</div>

CSS

.wrapper_builder {
    height: calc(100% - 85px);
    padding: 15px;
    margin-top: 15px;
    border-right: 1px solid #efefef;
    transition: 0.5s;
    cursor: context-menu;
    position: absolute;
    right: 0;
    left: 0;
    background-image: linear-gradient(
45deg
, #ededed 25%, transparent 25%),linear-gradient(
45deg
, transparent 75%, #ededed 75%),linear-gradient(
45deg
, transparent 75%, #ededed 75%),linear-gradient(
45deg
, #ededed 25%, #f9f9f9 25%);
    background-size: 16px 16px;
    background-position: 0 0, 0 0, -8px -8px, 8px 8px;

    max-width: none;
    width:100%;
    overflow: scroll;
}

.page_layout {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    width: 793px;
    position: relative;
    padding: 20px !important;
    height: 1122px;
    overflow: auto;


}