JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div class="skills-wheel">
    <ul class="wheel">
        <li>
            <img src="http://i57.tinypic.com/ehf2og.png" alt="ALT TEXT." /> <a href="#commercial-awareness" title="TITLE TEXT." class="fancybox">1. Commercial<br /> Awareness</a>

        </li>
        <li>
            <img src="http://i57.tinypic.com/ehf2og.png" alt="ALT TEXT." /> <a href="#communication" title="TITLE TEXT." class="fancybox">2. Communication</a>

        </li>
        <li>
            <img src="http://i57.tinypic.com/ehf2og.png" alt="ALT TEXT." /> <a href="#teamwork" title="TITLE TEXT." class="fancybox">3. Teamwork</a>

        </li>
        <li>
            <img src="http://i57.tinypic.com/ehf2og.png" alt="ALT TEXT." /> <a href="#negotiation" title="TITLE TEXT." class="fancybox">4. Negotiation</a>

        </li>
        
    </ul> 

</div>
<!-- OVERLAY Commercial Awareness -->
<div id="commercial-awareness" class="hide">
    
<h2>Commercial awareness:</h2>

    <p>Click on the statement you think best describes 'commercial awareness':</p>
    <ol>
        <li>Knowing how a business or industry works, understanding its key objectives and what makes it successful.</li>
        <li>Nothing everything about fishing and keeping up to date with news from Robson Green but never reading the business section of BBC news.</li>
    </ol>
</div>
<!-- OVERLAY Communication -->
<div id="communication" class="hide">
    
<h2>Communication:</h2>

    <p>Click on the statement you think best describes 'communication':</p>
    <ol>
        <li>This is the effective exchange of information. This can be verbal, non verbal, written communication and listening. It can also be using social media to the benefit of your work. You need the ability to stay focused and to express yourself clearly so that the message is conveyed concisely. Good questioning skills are also very important so that you understand the needs of others.</li>
        <li>This can be failure to listen to anyone else’s point of view and...

CSS

.hide {
    display: none;
}
.skills-wheel {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    height: 560px;
    margin: 0 auto 2em;
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 560px;
}

.wheel {
    border: 12px solid #ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    width: 100%;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wheel li {
    font-family:"avantgarde_bold", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    height: 50%;
    line-height: 18px;
    list-style: none;
    left: 50%;
    margin: 0 0 0 -106px;
    padding: 0;
    position: absolute;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    top: 0;
    width: 39.552238806%;
}

.wheel li:before {
    display: none;
}

.wheel a {
    color: #ffffff;
    left: 0;
    position: absolute;
    text-decoration: none;
    top: 48px;
    width: 100%;
}

.wheel li:nth-child(1) {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(20deg);
}

.wheel li:nth-child(2) {
    -webkit-transform: rotate(60deg);
    -moz-transform:...