JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="ctn">
    <div class="ctn-hex">
        <div class="ctn-top"></div>
        <div class="ctn-line">
            <div class="hex">
                <div class="top"></div>
                <div class="body"><div class="hex-title">C</div></div>
                <div class="bottom"></div>
            </div>
        </div>
        <div class="ctn-bottom"></div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);
.ctn{
    display:block;
    margin:100px auto;
    height:460px;
    width:800px;
    position:relative;
}
.ctn-hex{
    display:block;
    cursor:pointer !important;
    background:#eee;
    width:300px;
    position:absolute;
    bottom:0px;
    margin:0 auto;
}
.ctn-top{
    display:block;
    height:0;
    width:300px;
    background:#ccc;
    opacity:0;
    transition: height .2s, opacity .2s;
    -moz-transition: height .2s, opacity .2s;
    -webkit-transition: height .2s, opacity .2s;
    -o-transition: height .2s, opacity .2s;
}
.ctn-hex:hover .ctn-top{
    height:150px;
    opacity:1;
    transition: height .2s ease-out .1s, opacity .2s;
    -moz-transition: height .2s ease-out .1s, opacity .2s;
    -webkit-transition: height .2s ease-out .1s, opacity .2s;
    -o-transition: height .2s ease-out .1s, opacity .2s;
}
.ctn-bottom{
    display:block;
    height:0;
    width:300px;
    background:#bbb;
    transition: height .2s ease-out;
    -moz-transition: height .2s ease-out;
    -webkit-transition: height .2s ease-out;
    -o-transition: height .2s ease-out;
}
.ctn-hex:hover .ctn-bottom{
    height:300px;
}
.ctn-line{
    display:block;
    width:300px;
    height:10px;
    overflow:visible;
    background:#F3C956;
    position:relative;
}
.hex{
    position:absolute;
    top:-42px;
    left:106px;
}
.hex .top{
    width:0;
    border:5px solid tranparent;
    border-bottom:20px solid #F3C956;
    border-left:44px solid transparent;
    border-right:44px solid transparent;
}
.hex .body{
    background:#F3C956;
    width:88px;
    height:55px;
}
.hex .body .hex-title{
    color:#FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    position:absolute;
    margin:-2px 25px;
}
.hex .bottom{
    width:0;
    border:5px solid tranparent;
    border-top:20px solid #F3C956;
    border-left:44px solid transparent;
    border-right:44px solid transparent;
}