JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<div class="Navigation">
<ul>
    <li>
        <div class="Navagation_Title">
            <a href="#">About me</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Games Fundementals</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">System Fundementals</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Programming</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Web Design</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Extra</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Extra</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Extra</a>
        </div>
        <a href="#">
            <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
        </a>
    </li>
    <li>
        <div class="Navagation_Title">
            <a href="#">Extra</a>
        </div>
        <a href="#">
            <img...

CSS

body {
    background: #ccc; 
    background-color: #E6E6E6
}

* {
    margin: 0; 
    padding: 0;
}

.Navigation {
    width: 100%;
    height: 320px;
    overflow: hidden;
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 3);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 3);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 3);
}

.Navigation ul {
    width: 100%;
}
.Navigation li {
    position: relative;
    display: block;
    width: calc((100% / 13));
    box-sizing: border-box;
    float: left;

    border-left: 1px solid #888;

    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);


    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.Navigation ul:hover li {width: calc((100% - 640px) / 12);}
.Navigation ul li:hover {width: 640px;}

.Navigation li img {
    display: block;
}

.Navagation_Title {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    bottom: 0; 
    width: 640px;
}
.Navagation_Title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 15px;
    font-size: 16px;
}