JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="https://raw.github.com/fredhq/roundabout/master/jquery.roundabout.min.js"></script>
<script src="https://github.com/fredhq/roundabout-shapes/raw/master/jquery.roundabout-shapes.min.js"></script>
<ul>
    <li>Web Development</li>
    <li>Design &amp; Branding</li>
    <li class="selected">Social Apps</li>
    <li>UX and Prototyping</li>
    <li>Hosting &amp; Maintenance</li>
    <li>Mobile Apps</li>
</ul>

CSS

ul {position: relative; top: 20px; left: 20px;}
li {width: 100px; height: 100px; background: #aaa; display: block; position: absolute; text-align: center;}
li.selected {background: crimson;}
ul li:nth-child(1) {top: 0px; left: 50px;}
ul li:nth-child(2) {top: 0px; left: 170px;}
ul li:nth-child(3) {top: 120px; left: 210px;}
ul li:nth-child(4) {top: 240px; left: 170px;}
ul li:nth-child(5) {top: 240px; left: 50px;}
ul li:nth-child(6) {top: 120px; left: 10px;}

JavaScript

var slots = [];
$('ul li').each(function(){
    slots.push( $(this).position() );
});

console.log(slots);

$('ul li').click(function(){
    
});