JSFiddle - React, Tailwind, and code Playground

by Trey Hunner

HTML

<div id="panels">
    <table>
        <tr>
            <td id="add-client">
                <div class='dashed-panel'>                
                    <span class="sit-in-the-corner"> 1 </span> 
                    <div class='middle'>
                        <img src="images/add-client-head-icon.png" /><br />
                        Add Client
                    </div>       
                </div>
            </td>            
            <td id="create-project">
                <div  class='dashed-panel'>
                    <span class="sit-in-the-corner"> 2 </span> 
                    <div class='middle'>
                        <img src="images/create-project-icon.png" /><br /> 
                        Create Project
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td id="create-stages">
                <div class='dashed-panel'>
                    <span class="sit-in-the-corner"> 3 </span>
                    <div class='middle'>
                    <img src="images/create-stages-icon.png" /><br /> Create Stages
                    </div>
                </div>
            </td>
            <td id="add-images-to-stage">
                <div class='dashed-panel'>
                    <span class="sit-in-the-corner" id="stage-4"> 4 </span> 
                    <div class='middle'>
                    <img src="images/add-images-to-stage-icon.png" /><br /> Add Images to Stage
                    </div>
                </div>
            </td>
        </tr>    
    </table>
</div>

CSS

#panels, #panels table {
    width: 960px;
    margin: 140px auto 0 auto;  /* top, right, bottom, left */
    padding: 0px;
    border-spacing: 20px;
}

.dashed-panel {
    height: 300px;
    width: 440px;
    border: 7px dashed #bdbebf;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -khtml-border-radius: 50px;
    -webkit-border-radius: 50px;
    text-align: center;
    color: #90908f;
    font-family: Baskerville, Cambria, Times New Roman, Times, serif;
    position: relative;
}

#add-client .dashed-panel .middle, #create-project .dashed-panel .middle {
    margin-top: 20%;    
}

#create-stages .dashed-panel .middle {
    margin-top: 15%; 
}

#add-images-to-stage .dashed-panel .middle {
    margin-top: 12%;
}

#stages table, #clients table, #projects table, #images-in-stages table {
    width: 100%;
    margin: 100px auto 0 auto;
    border-collapse: collapse;
    padding: 5px;    
}

#stages table tr:hover, #clients table tr:hover, #projects table tr:hover {
    color: #484844;
}

.sit-in-the-corner {
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 1.5em;
    font-style: bold;
    color: #e0e1e2;
    background: #bdbebf;
    border-radius: 17px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    -khtml-border-radius: 17px;
}

.sit-below-icon {
    float: center;
}

.dashed-panel:hover span, .dashed-panel:hover #stage-3, .dashed-panel:hover #stage-4 {
    background: #484844;
    color: #fff;    
}


.dashed-panel:hover {
    border: 7px dashed #484844;
    cursor: pointer;
}

.dashed-circle.selected {
    border: 5px solid #484844 !important;
}

.is_done {
    border: 7px solid #484844;
}

JavaScript

$('#add-client').click(function(e) {
    if (!$(e.target).is("input")) {
        $(this).find('.middle').html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>");
        //        $(this).attr('id', '#clients');   This should be enabled once data has been entered and stored.            
    }
});

$('#create-project').click(function(e) {
    if (!$(e.target).is("input")) {
        $(this).find('.middle').html("Create Project <input type='text'>");
    }
});

$('#create-stages').click(function(e) {
    if (!$(e.target).is("input")) {
        $(this).find('.middle').html("Stage 1 <input type='text'><br />Stage 2 <input type='text'><br />Stage 3 <input type='text'><br />");
    }
});

$('#add-images-to-stage').click(function() {
    $(this).find('.middle').html("Drag and Drop Here");
    $('#add-images-to-stage').click(function(e) {
        if (!$(e.target).is("input")) {
            $(this).children().html("Expected Profit 2<input type='text'></input>");
        }
    });
});