JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="headerContainer80UIBase">
    <div class="DataTileContainerUI0">
        <div class="dataTileLeftDivHandleUI">
            <img src="http://www.viraapp.com/Home/GetUIThumbnailImage?dataTypeId=000003&itemId=100000000000001" style = "width: 80px; height: 80px; display: inline-block;"/>
        </div>
        <a href="#" class="attach0">
            <!--<div class="ContentWrapper1">-->
                <!--<div class="ContentWrapper2">-->
                    <div class="upWrapper">
                        <div class="upLeftWrapper">
                            up left
                        </div>
                        <div class="upRightWrapper">
                            up right
                        </div>
                    </div>
                    <div class="downWrapper">
                        down
                    </div>
                <!--</div>-->
            <!--</div>-->
        </a>
            
    </div>        
</div>

CSS

.headerContainer80UIBase
{
    background-color: #f3f3f4; /*#e8e8e8;*/
    /*width:100%;*/ 
    overflow: hidden; 
    clear:both;
    text-align: center; 

    min-width: 488px;
    
    margin-left: 24px; 
    margin-right: 24px; 
    margin-top: 2px; 
    margin-bottom: 2px;
}


.dataTileLeftDivHandleUI
{
    float: right; /*left;*/
    width: 80px;
    height: 80px;

    margin-left: 0px;
    
    cursor: pointer;
    /*border: 1px solid yellow;*/
    background-color: #e8e8e8; /*yellow;*/
    /*margin-right: 8px;*/

    /*display: inline-block;
    vertical-align: middle;*/

}


.DataTileContainerUI0{
    /*border: 1px dotted yellow;*/
    height: 80px;
    line-height:80px;
   
    /*background-color: #e8e8e8;*/


    /*overflow: hidden;*/
     /*display:table;*/

     cursor: pointer;
    
    
    background-color: #32323a; /*a2a2a2;*/
    /*text-align: center;*/ 

    display:block; 

    /*margin: 0px 24px 0px 24px;*/

    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px ;
    margin-bottom: 0px;

    padding: 0px;
       
    border-left: 2px solid #f3f3f4;
}

    .DataTileContainerUI0 .attach0
    {
        height: 80px;
        display: block;
        background-color: aqua;
    }

    .DataTileContainerUI0 .upWrapper
    {
        /*border: 1px solid red;*/
        background-color: transparent;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        text-align: right; /*left;*/

        /*display: block;*/
        /*width: 100%;*/        
    }

    .DataTileContainerUI0 .upLeftIcon
    {
        /*background-image: url(../Images/Icons/Btn/Filter-Icon.png);*/
        width: 40px;
        height: 40px;
        opacity: 0.4;
    }

    .DataTileContainerUI0 .LeftIcon
    {
        /*background-image: url(../Images/Icons/Btn/Filter-Icon.png);*/
        width: 80px;
        height: 80px;
        /*opacity: 0.4;*/
    }

    .DataTileContainerUI0 .upLeftIconWrapper
    {
        /*border: 1px solid red;*/
       ...