JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-area"> 
    
    
    <div class="panel-display panel-1col clear-block" id="welcome"> 
        <div class="panel-panel panel-col"> 
            <div><div class="panel-pane pane-custom pane-1" > 
                
                
                
                <div class="pane-content"> 
                    <div class="welcome_message"><br /> 
                        <h3><img src="sites/all/themes/yghhzen/css/images/helpingpeoplehelpthemselves.png" alt="Helping people help themselves."/></h3><br /> 
                        <ul><div class="spacer"></div> 
                            <li><a href="/dailynews/all"><strong>Learn</strong> more</a>. <a href="/supports/"><strong>Get</strong> support</a>.</li> 
                            <li><a href="/support_group/add"><strong>Create</strong> a group</a>. <a href="/friendsblock/"><strong>Find</strong> friends</a>.</li> 
                            <li class="last"><a href="/blogs/date/all"><strong>Share</strong> ideas</a>. <a href="/start"><strong>Make</strong> a difference</a>.<strong style="font-size:21px;">©</strong></li> 
                        </ul><br /> 
                    </div><br /><div class="grid"><div class="grid-m1"></div><a href="/start"><div class="grid-c1"> 
                    <div id="front_page_button1"> 
                        <br /> 
                        <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/getting_started.png" /><br /> 
                        <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/register_here.png" /><br /> 
                    </div> 
                    </div> 
                    </a> 
                    <div class="grid-m2"></div> 
                    <a href="/dailynews/all""> 
                    <div class="grid-c2"> 
                    <div id="front_page_button1"> 
                    <br /> 
                    <img style="display:block; margin:auto;"...

CSS

.grid {
    width: 92%;
    margin: -15px auto;
}

.grid-m1 {
    float: left;
    height: 1px;
}

.grid-c1 {
    float: left;
    width: 20%;
    /*border-bottom-style: dotted;
    border-bottom-color: #666;
    border-bottom-width: 1px;*/
    /*padding: 10px;*/
}

.grid-m2 {
    float: left;
    height: 1px;
}

.grid-c2 {
    float: left;
    width: 20%;
    /*border-bottom-style: dotted;
    border-bottom-color: #666;
    border-bottom-width: 1px;*/
    /*padding: 10px;*/
}

.grid-m3 {
    float: left;
    /*width: 2%;*/
    height: 1px;
}

.grid-c3 {
    float: left;
    width: 20%;
    /*padding: 10px;*/
}

.grid-m4 {
    float: left;
    /*width: 2%;*/
    height: 1px;
}

.grid-c4 {
    float: left;
    width: 20%;
    /*padding: 10px;*/
}

.grid-m5 {
    float: left;
    /*width: 2%;*/
    height: 1px;
}

.grid-c5 {
    float: left;
    width: 20%;
    /*padding: 10px;*/
}