JSFiddle - React, Tailwind, and code Playground

by Santharam N R

HTML

<div id="buttons">
    <div class="content-wrapper">
        <h2>Some title</h2>
        <div class="red-divider"></div>
        <div class="buttons">
            <div class="btn">
                <div class="popup">Description 1</div>
                <div class="btn1"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 2</div>
                <div class="btn2"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 3</div>
                <div class="btn3"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 4</div>
                <div class="btn4"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 5</div>
                <div class="btn5"></div>
                <p>some text goes here</p>
            </div>
        </div>
    </div>
</div>

CSS

.btn {
width: 190px;
display: inline-block;
vertical-align: top;
}

.btn1,.btn2,.btn3,.btn4,.btn5 {
width: 130px;
height: 130px;
border: 1px solid #fff;
border-radius: 100%;
margin: 0 auto;
position: relative;
}

.popup {
display: none;
position: absolute;
left: 50%;
top: 50%;
width: 500px;
margin-left: -250px;
height: 200px;
margin-top: -200px;
padding: 25px 10px 30px 10px;
color: #fff;
background: rgba(47,47,47,0.8);
z-index:1000;
overflow: hidden;
cursor: pointer;
}

JavaScript

jQuery(document).ready(function ($) {

    $('.btn').on('click', function() {
        $('.popup').hide();
        $(this).find('.popup').show();
    });

    $('.popup').on('click', function(e) {
        e.stopPropagation();
        $(this).hide();
    });
});