JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<script src="https://use.fontawesome.com/c3ef28c600.js"></script>
<div class="content-section">
   <div class="box">
      <div class="current medium">
         <div class="box-tool-bar">   
            <span class="title"></span>         
            <span class="controls">             
            <i class="fa fa-window-minimize"></i>       
            <i class="fa fa-window-restore"></i>       
            <i class="fa fa-window-maximize" ></i>           
            <i class="fa fa-window-close" ></i>     
            </span>    
         </div>
         <div class="content">   
            The team shipped every 3 weeks, tightly coordinating the schedule with each service team. It works … pretty much as one would expect a web application to work.
            And then everything went crazy.
            As we started ramping up the number of services in Azure, it became infeasible for one team to write all of the UI. The teams which owned the service were now responsible (mostly) for writing their own UI, inside of the portal source repository. This had the benefit of allowing individual teams to control their own destiny. However - it now mean that we had hundreds of developers all writing code in the same repository. A change made to the SQL Server management experience could break the Azure Web Sites experience. A change to a CSS file by a developer working on virtual machines could break the experience in storage. Coordinating the 3 week ship schedule became really hard. The team was tracking dependencies across multiple organizations, the underlying REST APIs that powered the experiences, and the release cadence of ~40 teams across the company that were delivering cloud services.
            Scaling to ∞ services
            Given the difficulties of the engineering and ship processes with the current portal, scaling to 200 different services didn’t seem like a great idea with the current infrastructure. The next time around, we took a different...

SCSS

.content-section {
        position: relative;
        width: 83%;
        height: 500px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        background-color: #444;



        .box {
            width: auto;
            height: 100%;
            margin-right: 10px;
            display: inline-block;

            .current {
                display: inline-block;
                height: 100%;

                &.small {
                    width: 200px;
                }

                &.medium {
                    width: 400px;
                }

                &.large {
                    width: 600px;
                }
            }

            .next {
                width: auto;
                height: 100%;
                display: inline-block;
            }

            .box-tool-bar {
                height: 19px;
                position: relative;
                display: table;
                width: 100%;
                background-color: #ffffff;
                border-bottom: 1px solid #333333;

                .controls {
                    display: table-cell;
                    float: right;

                    i {
                        font-size: 16px;
                        cursor: pointer;
                    }
                }

                .title {
                    display: table-cell;
                    float: left;
                }
            }

            .content {
                height: calc(100% - 20px);
                overflow-y: auto;
                overflow-x: hidden;
                white-space: normal;
                background-color: #ffffff;
                font-size: 15px;
                color: #333333;
                line-height: 24px;
                padding-top: 10px;
            }
            /*&:first-child {
        margin-left: 10px;
    }*/
            &:last-child {
                margin-right: 30%;
            }
        }
    }