JSFiddle - React, Tailwind, and code Playground

HTML

<!-- content to be placed inside <body>…</body> -->
<div class='circle-container'>
    <!--<a href='#' class='circle center'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
        <div class="content hidden">Content1</div>-->
	<a href='#' class='circle deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a>
        <div class="content">Content1</div>
	<a href='#' class='circle deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a>
        <div class="content hidden">Content2</div>
	<a href='#' class='circle deg135'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg'></a>
        <div class="content hidden">Content3</div>
	<a href='#' class='circle deg180'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg'></a>
        <div class="content hidden">Content4</div>
	<a href='#' class='circle deg225'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg'></a>
        <div class="content hidden">Content5</div>
	<a href='#' class='circle deg315'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
        <div class="content hidden">Content6</div>

</div>

CSS

/**
 * Position icons into circle (SO)
 * http://stackoverflow.com/q/12813573/1397351 
 */
.hidden{
    display:none;
}
.active{
    filter: brightness(200%);
    border-radius:50px;
    transition: all 1s;
}
.content{
    position:absolute;
    padding:10px;
    border:1px solid #dedede;
    border-radius:5px;
    background: #eeeeee;
    top:46%;
    left:41%;
}
.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    /*border: dashed 1px;*/
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
    /* 2em = 4em/2 */
    /* half the width */
}
.circle-container img {
    display: block;
    width: 100%;
}
.deg0 {
    transform: translate(12em);
}
/* 12em = half the width of the wrapper */
 .deg45 {
    transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
    transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
    transform: translate(-12em);
}
.deg225 {
    transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
    transform: rotate(315deg) translate(12em) rotate(-315deg);
}
/* this is just for showing the angle on hover */
 .circle-container a:not(.center):before {
    position: absolute;
    width: 4em;
    color: white;
    opacity: 0;
    background: rgba(0, 0, 0, .5);
    font: 1.25em/3.45 Courier, monospace;
    letter-spacing: 2px;
    text-decoration: none;
    text-indent: -2em;
    text-shadow: 0 0 .1em deeppink;
    transition: .7s;
    /* only works in Firefox */
   /* content: attr(class)'°';*/
}
.circle-container a:hover:before {
    opacity: 1;
}
/* this is for showing the circle on which the images are placed */
 .circle-container:after {
    position: absolute;
    top: 2.8em;
    left: 2.8em;
    width: 24em;
   ...

JavaScript

$(".circle").click(function(){    
    $(".content").hide(800);
    $(".circle").removeClass("active");
    $(this).addClass("active");
$(this).next(".content").slideDown(1000);
});