JSFiddle - React, Tailwind, and code Playground

https://vimeo.com/126783743

by John Doe

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:300,400,100&#39;"></script>
<div class="header">
    18
    <p class="date">July 2014</p>
</div>
<div class="headerseparator">
    monday
    <a class="addbtn">+</a>
</div>

CSS

body{
    font-family: roboto;
    color: #f1f1f1;
    margin: 0;
    padding: 0;
}
.header{
    background-color: #00ABD7;
    text-align: center;
    font-size: 70px;
    box-sizing: border-box;
    padding: 0 0 15px 0;
    font-weight: 100;
}
.header .date{
    color: #0083AE;
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: 0px;    
}
.headerseparator{
    background-color: #5F5F5F;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
}
.addbtn{
    background-color: #FFE647;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    display: block;
    position: absolute;  
    border-radius: 50%;
    color: #5F5F5F;
    top: -23px;
    right: 15px;    
    transition: all 500ms ease-in-out;
    cursor: pointer;
}
.addbtn.open{
    text-indent: -9999px;
    /*
    height: 1000%;
    width: 100%;
    border-radius: 0;
    top: 100%;
    right: 0px; */
	animation: open 1600ms ease-in-out;
    top: 400%;
    right: 50%;
}
@keyframes open {
	0% {
		
	}
	50% {
		
	}
	100% {
		top: 400%;
        right: 50%;
	}
}

JavaScript

$(".addbtn").click(function(){
    $(".addbtn").toggleClass("open");
});