<div class="wrapper">
	<div class="statusBar">
		<div class="signal">
			<span class="active"></span>
			<span class="active"></span>
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
		<div class="clock">
			<p>10:15 AM</p>
		</div>
		<div class="battery">
			<span></span>
		</div>
	</div>
	<div class="header">
		<div class="hamburgerWrapper">
			<div class="hamburger">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="headerLabel">
			<h1>INBOX</h1>
		</div>
		<div class="headerMenu">
			<h2>EDIT</h2>
		</div>
	</div>
	<div class="EmailsWrapper">
		<div class="EmailFull">
			<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
			<p>We have an app out right now.  You can check it out in the appstore.  However, I'm looking to take this app to the next level.</p>
			<p>I really would be excited to work together.  Please do let me know</p>
		</div>
		<div class="EmailSearch">
			<input type="text" placeholder="Search Messages" />
		</div>
		<div class="Email light">
			<div class="ImgWrapper">
				<div class="img notif">
				</div>
			</div>
			<div class="EmailTitle">
				<p class="EmailTime">11:12 AM</p>
				<h1>Sergey Zolkin</h1>
				<h2>New Project Inquiry</h2>
				<p class="EmailPreview">Hi Matt! Are you available for...</p>
			</div>
		</div>
		<div class="Email">
			<div class="ImgWrapper">
				<div class="img">
				</div>
			</div>
			<div class="EmailTitle">
				<p class="EmailTime">8:13 AM</p>
				<h1>Slack</h1>
				<h2>Notiications from the team..</h2>
				<p class="EmailPreview">Hi Matt, You have a new message...</p>
			</div>
		</div>
		<div class="Email light">
			<div class="ImgWrapper">
				<div class="img notif">
				</div>
			</div>
			<div class="EmailTitle">
				<p class="EmailTime">7:24 AM</p>
				<h1>Clark from Invision</h1>
				<h2>Weekly digest: How to design...</h2>
				<p class="EmailPreview">Plus why product thinking is the...</p>
			</div>
		</div>
	</div>
</div>
body {
	background: #732bde;
	padding-top: 50px;
	font-family: Helvetica;
}

	body * {
		box-sizing: border-box;
	}

	.wrapper {
		width: 320px;
		height: 568px;
		background: #fff;
		margin: auto;
		position: relative;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 8);
	}

		.statusBar {
			height: 20px;
			width: 100%;
			background: #21294a;
			position: absolute;
			top: 0px;
			display: flex;
			justify-content: space-between;
			z-index: 10;
		}

			.signal {
				margin: 5px 5px;
				padding: 0px;
				display: flex;
				width: 50px;
			}

				.signal > span {
					display: inline-block;
					border-radius: 5px;
					width: 5px;
					height: 5px;
					border: solid 1px #fff;
					margin: 0px 1px;
				}

					.signal > span.active {
						background: #fff;
						z-index: 3;
					}

			.clock p {
				color: #fff;
				font-weight: 100;
				font-size: 10px;
				padding: 0px;
				margin: 0px;
			}

			.battery {
				margin: 3px 5px;
				width: 50px;
			}

				.battery span {
					display: block;
					height: 7px;
					width: 17px;
					border-radius: 1px;
					background: #fff;
					position: relative;
					float: right;
				}
					
					.battery span:after {
						content: " ";
						display: inline-block;
						width: 3px;
						height: 4px;
						background: #fff;
						border-radius: 4px;
						position: absolute;
						right: -2px;
						top: 1px;
					}

		.header {
			padding: 5px 15px 15px 15px;
			width: 100%;
			background: #21294a;
			position: absolute;
			top: 20px;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			z-index: 10;
			border-bottom: solid 1px #424a63;
		}

			.header:after {
				content: " ";
				display: block;
				height: 4px;
				width: 85%;
				background: linear-gradient(to right, #5a6ab8 0%,#4bafcd 100%);
				position: absolute;
				bottom: -4px;
				left: 0px;
				right: 0px;
				box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
			}

			.hamburgerWrapper {
				margin: 0px;
				padding: 0px;
				width: 50px;
			}

					.hamburger {
						width: 13px;
					}

						.hamburger.active {
							cursor: pointer;
						}

						.hamburger span {
							display: block;
							margin: 2px auto;
							height: 2px;
							width: 100%;
							background: #467797;
							border-radius: 9px;
							opacity: 1;
							transform: rotate(0deg);
							transition: .25s ease-in-out;
						}

								.hamburger.active span:nth-child(1) {
									transform: rotate(-45deg) translate(-4px, -2px);
									width: 75%;
								}

								.hamburger.active span:nth-child(3) {
									transform: rotate(45deg) translate(-3px, 2px);
									width: 75%;
								}

			.headerLabel h1 {
				color: #fff;
				font-size: 15px;
				font-weight: 100;
				line-height: 1em;
				padding: 0px;
				margin: 0px;
			}

			.headerMenu {
				width: 50px;
				text-align: right;
			}

				.headerMenu h2 {
					color: #467797;
					font-size: 12px;
					font-weight: 600;
					line-height: 1em;
					padding: 0px;
					margin: 0px;
				}

		.EmailsWrapper {
			height: 100%;
			margin: auto;
			position: relative;
			background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
		}

			.EmailFull {
				position: absolute;
				top: 115px;
				background: #f2f2f2;
				height: 100%;
				padding: 0px 25px;
				color: rgba(0, 0, 0, .6);
				max-height: 0px;
				overflow: hidden;
				transition: all .3s;
			}

				.EmailFull.active {
					max-height: 453px;
					overflow: scroll;
				}

				.EmailFull p {
					line-height: 1.6em;
				}

			.EmailSearch {
				width: 90%;
				margin: auto;
				padding: 65px 0px 20px 0px;
			}

				.EmailSearch input {
					width: 100%;
					font-size: 12px;
					font-weight: 100;
					color: rgba(255, 255, 255, .5);
					outline: none;
					background: transparent;
					border: none;
					padding: 15px 0px;
					border-bottom: solid 1px rgba(255, 255, 255, .1);
				}

					.EmailSearch input::-webkit-input-placeholder {
						color: rgba(255, 255, 255, .5);
						font-weight: 100;
					}

			.Email {
				box-sizing: border-box;
				border-radius: 3px;
				background: rgba(255, 255, 255, .1);
				padding: 5px;
				width: 100%;
				max-width: 90%;
				max-height: 100px;
				overflow: hidden;
				margin: 3px auto;
				transition: all .3s;
				display: flex;
				flex-wrap: wrap;
				cursor: pointer;
				position: relative;
				opacity: 1;
			}

				.Email.light {
					background: rgba(255, 255, 255, .4);
				}

				.Email.active {
					margin-top: -76px;
					padding: 10px 0px;
					background: #21294a;
					color: #fff;
					z-index: 15;
					max-width: 100%;
					cursor: initial;
					border-radius: 0px;
				}

				.Email.deactive {
					max-height: 0px;
					padding: 0px;
					margin: 0px auto;
					opacity: 0;
				}

					.Email .ImgWrapper {
						width: 20%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

						.Email .img {
							width: 40px;
							height: 40px;
							background: #fff;
							border-radius: 100%;
							position: relative;
						}

							.Email .img.notif:before {
								content: " ";
								display: block;
								width: 12px;
								height: 12px;
								background: #5bc3e4;
								border-radius: 100%;
								border: 2px solid #868b9d;
								position: absolute;
								top: -2px;
								left: -2px;
								opacity: 1;
								transition: all .3s;
							}

								.Email.active .img.notif:before {
									opacity: 0;
								}

					.EmailTitle {
						width: 80%;
						position: relative;
						color: #fff;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
					}

						.EmailTitle .EmailTime {
							position: absolute;
							top: 0px;
							right: 0px;
							font-size: 12px;
							font-weight: 100;
							margin: 0px;
							padding: 5px;
						}

						.EmailTitle h1 {
							margin: 0px;
							padding: 0px;
							font-size: 15px;
							line-height: 1em;
							font-weight: 500;
							width: 100%;
						}

						.EmailTitle h2 {
							margin: 0px;
							padding: 3px 0px;
							font-size: 12px;
							line-height: 1em;
							font-weight: 300;
						}

						.EmailTitle p.EmailPreview {
							margin: 5px 0px;
							max-height: 25px;
							padding: 0px;
							font-size: 12px;
							font-weight: 100;
							opacity: .8;
							overflow: hidden;
							transition: all .3s;
						}
						
							.Email.active .EmailTitle p.EmailPreview {
								max-height: 0px;
							}
// Inspired by https://dribbble.com/shots/2810563-Messages-UI-UX-Animation

$(function() {
	$(".Email").on("click", function() {
		$(this).addClass("active")
		$(".Email").not(".active").addClass("deactive")
		$(".hamburger").addClass("active");
		$(".EmailFull").addClass("active");
		$(".headerLabel h1").text("MESSAGE");
	})
	$(".hamburgerWrapper").on("click", function() {
		$(".Email.active").removeClass("active")
		$(".Email.deactive").removeClass("deactive")
		$(".hamburger").removeClass("active");
		$(".EmailFull").removeClass("active");
		$(".headerLabel h1").text("INBOX");
	})
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js