JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="WholeDiv">
    <div class="halfDataTileHolderNew">
        <a href="www.google.com">
        <div class="halfDataTileNew vFlex1" >
            <div class="picWrapper">
                <img class="mainPic" src="http://www.viraapp.com/Home/GetUIThumbnailImage?dataTypeId=000003&itemId=100000000000001" />
            </div>
            
            <div class="actionWrapper vFlex2">
                <div class="actionUpWrapper">
                    <div class="upFirstWrapper">
                        up left
                    </div>
                    <div class="upSecondWrapper">
                        up right 111111111111111111111111111111
                    </div>
                </div>
                <div class="actionDownWrapper">
                    1
                </div>
            </div>
            
        </div>
            </a>
        <!--
        <div class="halfDataTileNew">2 </div>
        <div class="halfDataTileNew">3 </div>
        <div class="halfDataTileNew">4 </div>-->
    </div>    
</div>

CSS

html, body {
    direction: rtl;
    font-family: 'Times New Roman';
}

.aSimple {
    color: #F3F3F4;
    background-color: transparent;
    outline: medium none;
    text-decoration: none;
    cursor: pointer;
    vertical-align: top;
    font-size: 18px;
    font-weight: normal;
}

.mainPic{
    vertical-align: middle;
}

.WholeDiv{
    margin-right: 20px;
    margin-left: 20px;
    background-color: #ffffff;
    border: 2px solid #e8e8e8;
}

.halfDataTileHolderNew{
    background-color: lime;
    min-width: 512px;
    text-align: center;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    
    
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    
    /*
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    */
    
    
    /*flex-wrap: wrap;*/
    -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
    
    -webkit-align-content: center;
   align-content: center;
    
    overflow: hidden;
}

.halfDataTileNew{
    background-color: #ffffff;
    width: 510px;
    /*flex-basis: 255px;*/
    
    min-width: 510px;
    max-width: 600px;
    
    height: 80px;
    line-height: 80px;
    border: 1px solid #e8e8e8;
    text-align: center;
    
    flex: 1 1 auto;
    overflow: hidden;
    
    /*
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    
    
    -webkit-box-align: center;
    -moz-box-align: center;
   ...