JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">
<a href="#" class="list active">List</a>
<a href="#" class="grid">Grid</a>
</div>

<div id="wrapper">
<ul class="list">
    <li class="header">
        <div class="image">Image</div>
        <h2 class="name">Name</h2>
        <p class="date">Start Date</p>
        <p class="title">Title</p>
    </li>
    <li class="even">
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
        <h2 class="name">Adam Ant</h2>
        <p class="date">1995</p>
        <p class="title">Specialist</p>
    </li>
    <li class="odd">
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
        <h2 class="name">Brian Box</h2>
        <p class="date">2005</p>
        <p class="title">Specialist</p>
    </li>
    <li class="even">
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
        <h2 class="name">Clara Clock</h2>
        <p class="date">2010</p>
        <p class="title">Manager</p>
    </li>
    <li class="odd">
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
        <h2 class="name">Darla Dock</h2>
        <p class="date">1996</p>
        <p class="title">Editor</p>
    </li>
</ul>

</div>

CSS

body {
font-family: sans-serif;
    
}
.controls {
text-align: right;
    width: 500px;
}
.controls a {
background-color: #000;
    color: #fff;
        display: inline-block;
    padding: 6px;
    text-decoration: none;
}
.controls a.active {
background-color: blue;
}

#wrapper .list{
    display: table;
}

#wrapper .list li { 
    width: 500px; 
    position: relative;
    height: 30px;
    display: table-row;
}

#wrapper .list li.odd * {
    background-color: #eee;
}
#wrapper .list li.header {
    background-color: #666;
    color: #fff;
}
#wrapper .list li * {
    display: table-cell;
    height: 30px;
}
#wrapper .list li h2.name {
    left: 0;
    width: 150px;
    
}
#wrapper .list li p.date {
    left: 150px;
    width: 100px;
}
#wrapper .list li p.title {
    left: 250px;
    width: 100px;
}
#wrapper .list li div.image {
    left: 350px;
    width: 150px;
}
#wrapper .list li div.image img {
 height: 20px;
 width: 20px
        margin: 0 auto;
}




#wrapper .grid li { 
    display: inline-block;
    width: 200px; 
    height: 200px;
    position: relative;
    overflow: hidden;
}
#wrapper .grid li.header {
display: none;
}
#wrapper .grid .title {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    width: 200px;
    line-height: 2;
    height: 30px;
    display:block;
}
#wrapper .grid p.date {
display: none;
}
#wrapper .grid .name {
display: none;
}

JavaScript

$('.controls a').bind('click', function(){
    $('.controls a').toggleClass('active');
	$('ul').toggleClass('list').toggleClass('grid');

    
	$('ul.grid li').each(function () {
		var $this = $(this);
        
        $('.title', $this).prependTo($this);
	});	   
    
    $('ul.list li').each(function () {
		var $this = $(this);
        $('.title', $this).appendTo($this); 
    });
});