JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="pentamenu">
    <div class="pentm">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 577.8 528.3">
            <defs>
                <pattern xmlns="http://www.w3.org/2000/svg" id="img1" patternUnits="userSpaceOnUse" width="600" height="600">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/2.jpg" x="0" y="0" width="600" height="600">
                        <animatetransform attributeName="transform" type="scale" from="1" to="0.9" dur="8s" repeatCount="indefinite" values="1; 0.9; 1" keyTimes="0; 0.5; 1" />
                    </image>
                </pattern>
                <pattern xmlns="http://www.w3.org/2000/svg" id="img2" patternUnits="userSpaceOnUse" width="600" height="600">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/1.jpg" x="0" y="0" width="600" height="600">
                        <animatetransform attributeName="transform" type="scale" from="1" to="0.9" dur="8s" repeatCount="indefinite" values="1; 0.9; 1" keyTimes="0; 0.5; 1" />
                    </image>
                </pattern>
                <pattern xmlns="http://www.w3.org/2000/svg" id="img3" patternUnits="userSpaceOnUse" width="600" height="600">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/3.jpg" x="0" y="0" width="600" height="600">
                        <animatetransform attributeName="transform" type="scale" from="1" to="0.9" dur="8s" repeatCount="indefinite" values="1; 0.9; 1" keyTimes="0; 0.5; 1" />
                    </image>
                </pattern>
            </defs> <a xlink:href="http://www.site.ru"><polygon fill="url(#img1)" points="129,0.3 447.3,0.3 502.3,132 289.1,229.3 73.1,132.3  " id="top" /></a>
 <a xlink:href="http://www.ya.ru"><polygon fill="url(#img2)" points="68.3,142.3 283,236.1 283,527.6 0,298 " id ="left" /></a>
 <a...

CSS

.pentamenu {
    margin: 0 auto;
    width: 555px;
    padding-top: 80px;
}
.pentm {
    position: absolute;
    width: 555px;
    height: 555px;
}
.pentalink1 {
    position: absolute;
    left: 210px;
    top: 70px;
    text-transform: uppercase;
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    font-size: 28px;
    color: #FFF;
}
.pentalink2 {
    position: absolute;
    left: 80px;
    top: 270px;
    text-transform: uppercase;
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    font-size: 28px;
    color: #FFF;
}
.pentalink3 {
    position: absolute;
    left: 310px;
    top: 270px;
    text-transform: uppercase;
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    font-size: 28px;
    color: #FFF;
}
#top, #left, #right {
    cursor: pointer;
}
svg {
    display: block;
    width: 100%;
    height: 500px;
}