JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//fonts.googleapis.com/css?family=Roboto:300,100,700"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="container">
	<div class="header">
		<ul class="icon_nav">
			<li><i class="fa fa-arrow-left"></i></li>
			<li><i class="fa fa-bars"></i></li>
		</ul>
		<h1>Checking</h1>
		<span class="total pos">430.23</span>
	</div>
	<div class="content">
		<ul class="list">
			<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/15/15</span><span class="amount pos">150.00</span></li>
			<ul class="info">
				<li><h3>Description</h3></li>
				<li>Transfer from account: XXXXXXXX1234</li>
			</ul>
			<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/04/15</span><span class="amount neg">13.99</span></li>
			<ul class="info">
				<li><h3>Description</h3></li>
				<li>Transfer from account: XXXXXXXX1234</li>
			</ul>
			<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li>
			<ul class="info">
				<li><h3>Description</h3></li>
				<li>Transfer from account: XXXXXXXX1234</li>
			</ul>
			<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li>
			<ul class="info">
				<li><h3>Description</h3></li>
				<li>Transfer from account: XXXXXXXX1234</li>
			</ul>
			<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li>
			<ul class="info">
				<li><h3>Description</h3></li>
				<li>Transfer from account: XXXXXXXX1234</li>
			</ul>
			<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li>
			<ul class="info">
				<li><h3>Description</h3></li>
				<li>Transfer from account: XXXXXXXX1234</li>
			</ul>
		</ul>
	</div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
}
html {
	background-color: #34495e;
}
.container {
	background-color: #ecf0f1;
	width: 250px;
	margin: 0 auto;
	display: block;
}
.header {
	cursor: default;
	width: 100%;
	background-color: #1abc9c;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 13px;
	text-align: center;
	padding-top: 20px;
	box-sizing: border-box;
	padding-bottom: 10px;
	border-bottom: 2px solid #16a085;
}
.total {
	display: block;
	padding: 10px;
	font-size: 20px;
	font-weight: 700;
	background-color: #ecf0f1;
	width: 100px;
	border-radius: 50px;
	margin: 10px auto 0;
}
.icon_nav {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	color: #ecf0f1;
	font-size: 20px;
	width: 100%;
	padding: 0 20px 20px 20px;
	box-sizing: border-box;
	border-bottom: 2px solid #16a085;
}
.icon_nav i {
	cursor: pointer;
	display: block;
	padding: 10px;
	border-radius: 50%;
}
.icon_nav i:hover {
	background-color: #16a085;
}
h1 {
	margin-top: 10px;
	font-weight: normal;
	color: #ecf0f1;
}
.content {
	display: flex;
	justify-content: space-between;
}
.list {
	width: 100%;
	list-style-type: none;
	font-family: 'Roboto', sans-serif;
	color: #2c3e50;
}
.list li {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 5px 10px 5px 10px;
	box-sizing: border-box;
	-webkit-user-select: none;
	cursor: pointer;
}
.list li i {
	margin-right: 5px;
	opacity: 0.25;
}
.amount {
	font-weight: 300;
}
.pos {
	color: #27ae60;
}
.pos:before {
	content: '+$';
}
.neg {
	color: #c0392b;
}
.neg:before {
	content: '-$';
}
.info {
	list-style-type: none;
	font-size: 12px;
	background-color: #bdc3c7;
	padding: 0;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	height: 0;
}
.info ul li {
	background-color: #bdc3c7;
	width: 100%;
	height: 100px;
	border-top: 1px solid #7f8c8d;
	margin-top: -72px;
}
.info li h3 {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: -5px;
}

JavaScript

var listItems=null;
var pressedDuration=.4;
var releasedDuration=.3;
function toggleClickTween(listItem){
	listItem.data('isOpened',!listItem.data('isOpened'));
	var isOpened=listItem.data('isOpened');
	var onOpenedListItemProps={borderBottomWidth:2,borderBottomStyle:'solid',borderBottomColor:'#95a5a6',ease:Power4.easeOut};
	var onClosedListItemProps={borderBottomWidth:0,borderBottomStyle:'solid',borderBottomColor:'#95a5a6',ease:Power4.easeIn,clearProps:'all'};
	var onOpenedItalicProps={rotation:90,ease:Power4.easeOut,force3D:false};
	var onClosedItalicProps={rotation:0,ease:Power4.easeIn,force3D:false,clearProps:'all'};
	var onOpenedInfoProps={height:55,padding:5,ease:Bounce.easeOut};
	var onClosedInfoProps={height:0,padding:0,ease:Power4.easeIn,clearProps:'all'};
	TweenMax.to(listItem,isOpened?pressedDuration:releasedDuration,isOpened?onOpenedListItemProps:onClosedListItemProps);
	TweenMax.to(listItem.find('i'),isOpened?pressedDuration:releasedDuration,isOpened?onOpenedItalicProps:onClosedItalicProps);
	TweenMax.to(listItem.next(),isOpened?pressedDuration:releasedDuration,isOpened?onOpenedInfoProps:onClosedInfoProps);
}
$(document).ready(function(){
	listItems=$('.list').find('li');
	listItems.each(function(){$(this).data('isOpened',false);});
	listItems.hover(function(){$(this).find('i').css('opacity','0.75');},function(){$(this).find('i').css('opacity','0.25');});
	listItems.click(function(){toggleClickTween($(this));});
});