JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<body>

    <div class="header">



        <div class="filterDate">
            <select>
                <option value="operator='this-year'">Current Year</option>
                <option value="operator='LastYear'">Year - 1</option>
                <option value="operator='last-x-months' value='12'">12 Months</option>
            </select>
        </div>
        <div class="columnTitle">
            Field1
        </div>

        <div class="columnTitle">
            Field2

        </div>
        <div class="columnTitle">
            Field3

        </div>
        <div class="columnTitle">
            Field4

        </div>
        <div class="columnTitle">
            Field5
        </div>
        <div class="columnTitle">
            Field6

        </div>
        <div class="columnTitle">
            Field7

        </div>
        <div class="columnTitle">
            Field8

        </div>
        <div class="columnTitle">
            Field9

        </div>
        <div class="columnTitle">
            Field10

        </div>
        <div class="columnTitle">
            Field11

        </div>
        <div class="columnTitle">
            Field12

        </div>
        <div class="columnTitle">
            Field13

        </div>
        <div class="columnTitle">
            Field14

        </div>
        <div class="columnTitle">
            Field15

        </div>
        <div class="columnTitle">
            Field15

        </div>
        <div class="columnTitle">
            Field15

        </div>
        <div class="columnTitle">
            Field15

        </div>
    </div>
    <div class="content">

    </div>


</body>

CSS

body {
           
            /*width: 120%;*/
           
        }

.header{
  width:430px;
  overflow-x:auto;
}
        .columnTitle {
            /*font-size: 15px;
            font-family: 'SegoeUI', 'Segoe UI';
            font-weight: bold;*/
            font: normal normal normal 15px / 20px 'SegoeUI', 'Segoe UI';
            text-align: left;
            /*float: left;*/
            width: 8%;
            display:table-cell;
            color: #045999;
            text-align: center;
            border-left: 2px solid #ccc;
            line-height: 20px;
            vertical-align: middle;
          
            
        }


        div.filterDate > select {
            webkit-appearance: menulist-button;
            height: 40px;
            /*border: none;*/
            float: left;
            width: 17%;
        }

        div.data {
            float: left;
            width: 6.7%;
            font-size: 14px;
            font-family: "Segoe UI Regular", SegoeUI, "Segoe UI";
            color: rgb(49, 95, 162);
            text-align: center;
            display: inline-block;
        }

        div.l2name {
            width: 16%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l3name {
            width: 15%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 1%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l4name {
            width: 14%;
            font-family: 'Segoe UI Regular', 'SegoeUI', 'Segoe UI';
            color: #315fa2;
            margin-left: 2%;
            border-left: solid;
            text-align: left;
            font-size: 16px;
        }

        div.l5name {
            width: 13%;
            font-family: 'Segoe UI Regular',...