JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<div class=container>
    <div class=row>
        <div class=header>
            <div class=averted>Cases Averted: 150</div>
            <div class=playbar>Play</div>
            <div class=budget>$55,000</div>
        </div>
    </div>
    <!-- <div class='row agebucketcontainer'>
        <div class=agebucket>
            
        </div>
    </div>
     -->
    <div class=row>
        <div class=timeline></div>
    </div>
    <div class=row>
        <!-- <div class='interventions borderunderline'> <span class=title>Interventions</span>
         <span class=option>Bednets</span>
         <span class=option>Spray</span>
         <span class=option>Drugs</span>
        
        </div> -->
        <div class=settings>
            <div class=attributes>
                <div class=attribute> <span class='title borderunderline'>Intervention: 
                    <select name="" id="" class=select>
                        <option value="Bednet">Bednet</option>
                        <option value="Bednet">Drug</option>
                        <option value="Bednet">Spray</option>
                    </select>
                    </span>

                    <div class=item>
                        <div class=itemheader>Quality</div>
                        <input type="checkbox">Low
                        <input type="checkbox">Med
                        <input type="checkbox">High</div>
                    <div class=item>
                        <div class=itemheader>Type</div>
                        <input type="checkbox">Constant
                        <input type="checkbox">Variable</div>
                </div>
                <div class=attribute> <span class='title borderunderline'>Distribution</span>

                    <div class=item>
                        <div class=itemheader>Age Group</div>
                        <div>
                            <input type="checkbox">1
                            <input type="checkbox">2
                         ...

CSS

body, html {
    margin: 0;
    min-height: 100vh;
}
.container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* flex: 1 0 auto; */
}
.interventions {
    display: flex;
    background-color: yellow;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 200px;
    border: 1px solid;
}
.title {
    padding: 5px;
    margin: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.borderunderline {
    border-bottom: 1px solid;
}
.option {
    background-color: white;
    margin: 15px;
    padding: 15px;
    text-align:center;
    vertical-align: middle;
    border: 1px solid;
    border-radius: 2em;
}
.row {
    display: flex;
    background-color: green;
    flex-direction: row;
    flex-wrap: nowrap;
    /* border: 1px solid; */
    /* flex: 1 0 auto; */
}
.settings {
    display: flex;
    background-color: pink;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 300px;
    /* border: 1px solid; */
    text-align: center;
}
.header {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
}

.attributes {
    display: flex;
    flex-flow: row nowrap;
    background-color: brown;
    height: 200px;
}
.attribute {
    width: 200px;
    background-color: orange;
    /* border: 1px solid; */
    display: flex;
    flex-flow: column nowrap;
}
.apply {
    border: 1px solid;
    padding: 0px;
    background-color: whitesmoke;
    float: right;
    margin: 20px;
    flex: 1;
}
.item {
    flex-flow: row nowrap;
    padding: 10px 10px 10px 10px;
}
.itemheader {
    padding-bottom: 4px;
    margin: 3px;
    font-weight: bold;
    text-decoration: underline;
}
.select {
    /* padding: 5px 10px 5px 10px; */
    border: 1px solid;
}
.item input[type=text] {
    width: 30px;
    padding: 5px;
}

. input[type=checkbox] {
    transform: scale(1.5);
    
    -webkit-transform: scale(1.5);
    
    border: none;
}
/* .agebucketcontainer {
    justify-content: center;
} */
.agebucket {
    width: 75%;
  ...