JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<div class="referrals-data">
<div class="data-contner">

<div class="table-elmnt">
    <div class="referral-band row-elmnt">
        <div class="clearfix cell-elmnt">
            <div class="referral-id have-referrals">
                <span class="referral-pic"></span>
                <span class="referral-name">Click me</span>
            </div>
        </div>
        <div class="cell-elmnt">
        $2000
        </div>
        <div class="cell-elmnt">
        $50
        </div>
    </div> <!--referral-band-->

        <div class="my-referral">
            <div class="referrals-data sub-referral">
                <div class="table-elmnt">
                    <div class="referral-band row-elmnt">
                        <div class="clearfix cell-elmnt">
                            <div class="referral-id">
                                <span class="referral-pic"></span>
                                    <span class="referral-name">User</span>
                            </div>
                        </div>
                        <div class="cell-elmnt">
                            $2000
                        </div>
                        <div class="cell-elmnt">
                            $50
                        </div>
                    </div> <!--referral-band-->
                </div> <!--table-elmnt-->
            </div>

            <div class="referrals-data sub-referral">
                <div class="table-elmnt">
                    <div class="referral-band row-elmnt">
                        <div class="clearfix cell-elmnt">
                            <div class="referral-id have-referrals">
                                <span class="referral-pic"></span>
                                <span class="referral-name">Click me</span>
                            </div>
                        </div>
                        <div class="cell-elmnt">
                            $2000
                        </div>
                        <div...

CSS

.table-elmnt { display: table; width: 100%; }
.row-elmnt { display: table-row; width: 100%; padding: ; } 
.cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; } 
.cell-elmnt:first-child { width: 70%; }
.referrals-heads, .referral-stats { padding-left: 0; margin-bottom: 0; float: right; list-style-type: none; }
.referrals-heads > li { display: inline-block; color: #848484; padding: 10px; min-width: 250px; text-align: center; }
.referrals-data { margin-bottom: 7px; }
.data-contner { background: #d4d4d4; }
.my-referral { padding-left: 25px; }
.sub-referral { margin-bottom: 0; border-bottom: none; }
.referral-stats > li { display: inline-block; padding: 0 30px; text-align: center; }
.referral-id { float: left; padding-left: 20px; }
.referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
.referral-pic > img { max-width: 100%; min-height: 100%; }
.referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
.have-referrals { background: url('../images/ic-arrow.png') no-repeat 0 center; cursor: pointer; }
.show { background-image: url('../images/ic-arrow-down.png'); }

JavaScript

$('.my-referral').hide();
$('.have-referrals').click(function () {
    var $p3 = $(this).parent().parent().parent();
    var $p4 = $(this).parent().parent().parent().parent();
    if($p4.children('.my-referral').css('display') == 'none'){
         $(this).addClass('show');
    }else{
         $(this).removeClass('show');
    };
    $p3.children('.my-referral').fadeToggle();
});