JSFiddle - React, Tailwind, and code Playground

by Tmin10

HTML

<ul id="hex">
    <li class="p1">
        <a href="#">
            <b></b>
            <span>Тест</span>
            <em></em>
        </a>
    </li>
    <li class="p2">
        <a href="#">
            <b></b>
            <span>MENUS</span>
            <em></em>
        </a>
    </li>
    <li class="p3">
        <a href="#">
            <b></b>
            <span>LAYOUTS</span>
            <em></em>
        </a>
    </li>
    <li class="pc">
        <a class="inner" href="#">
            <b></b>
            <span>BOXES</span>
            <em></em>
        </a>
    </li>
    <li class="p4">
        <a href="#">
            <b></b>
            <span>MOZILLA</span>
            <em></em>
        </a>
    </li>
    <li class="p5">
        <a href="#">
            <b></b>
            <span>EXPLORER</span>
            <em></em>
        </a>
    </li>
    <li class="p6">
        <a href="#">
            <b></b>
            <span>OPACITY</span>
            <em></em>
        </a>
    </li>
</ul>

CSS

#hex {
    padding:0; 
    margin:0 auto; 
    list-style:none; 
    width:325px;
}
#hex li {
    display:block; 
    float:left; 
    width:104px; 
    margin-right:4px;  
    height:120px;
}
#hex li.p1 {
    /padding-left:108px;
}
#hex li.p2 {
    /margin-top:-16px;
}
#hex li a {
    text-decoration:none; 
    color:#000; 
    cursor:pointer;
}
#hex li a b {
    position: relative;
    left: -30px;
    display:block; 
    width:0px; 
    height:0; 
    overflow:hidden; 
    border-right:30px solid #ec0; 
    border-bottom:52px dotted transparent; 
    border-top:52px dotted transparent;
}
#hex li a span {
    display:block; 
    position: relative;
    top: -104px;
    width:60px; 
    height:104px; 
    line-height:104px; 
    text-align:center; 
    background:#ec0; 
    font-size:12px; 
    font-family: arial, veradana, sans-serif;
}
#hex li a em {
    display:block; 
    position: relative;
    left: 60px;
    top: -208px;
    width:0; 
    height:0; 
    overflow:hidden; 
    border-left:30px solid #ec0; 
    border-bottom:52px dotted transparent; 
    border-top:52px dotted transparent;
}
/* hack for IE5.5 */
* html #hex li a b, * html #hex li a em {
    width:104px; 
    height:30px; 
    w\idth:0; 
    he\ight:0;}

#hex li a.inner b {border-right-color:#c60;}
#hex li a.inner span {background:#c60;}
#hex li a.inner em {border-left-color:#c60;}

#hex li a:hover {white-space:normal; color:#fff;}
#hex li a:hover b {border-right-color:#c90;}
#hex li a:hover span {background:#c90;}
#hex li a:hover em {border-left-color:#c90;}

#hex li a.inner:hover b {border-right-color:#a40;}
#hex li a.inner:hover span {background:#a40;}
#hex li a.inner:hover em {border-left-color:#a40;}