JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<div class="shapes">
      <div id="one" class="circle" data-effect="deep-space-sparkle">
        <h1>1</h1></div>
      <div id="two" class="circle" data-effect="chinese-violet">
        <h1>2</h1></div>
      <div id="three" class="circle" data-effect="mellow-yellow">
        <h1>3</h1></div>
      <div id="four" class="circle" data-effect="blanched-almond">
        <h1>4</h1></div>
      <div id="five" class="circle" data-effect="gainsboro">
        <h1>5</h1></div>
      <div id="six" class="circle" data-effect="mauve">
    <h1>6</h1></div>	
  </div>

CSS

.circle {
  	width: 200px;
	  height: 200px;
    border-radius: 200px;
    background: #ce7b91;
    display: table;
    margin: 20px auto;
    text-align:center;
    border: 8px solid #000000;
}

h1 {
    vertical-align: middle;
    display: table-cell;
    font-size: 90px;
    color: white;
     font-weight: bold;
}

#one { background: #ce7b91;}
#two{ background: #9bc53d;}
#three{ background: #33a1fd;}
#four{ background: #d96c06;}
#five{ background: #1f1300;}
#six{ background: #af9b46;}

.circle text {
	text-anchor: middle;
	fill: #ffffff;
	font-size: 75px;
}


#one.deep-space-sparkle {
	background: #4A6C6F;
}

#two.chinese-violet {
	background: #846075;
}

#three.mellow-yellow {
	background: #F9DF74;
}

#four.blanched-almond {
	background: #F9EDCC;
}

#five.gainsboro {
	background: #DBDBDB;
}

#six.mauve {
	background: #E4C1F9;
}

JavaScript

jQuery(function ($) {
$('.circle').click(function(){
  $(this).toggleClass($(this).attr('data-effect'));
});
});