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;
}

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

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

.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

$('div.circle').click(function(){
  $(this).toggleClass('deep-space-sparkle');
});

$('#two').click(function(){
  $(this).toggleClass('chinese-violet');
});

$('#three').click(function(){
  $(this).toggleClass('mellow-yellow');
});

$('#four').click(function(){
  $(this).toggleClass('blanched-almond');
});

$('#five').click(function(){
  $(this).toggleClass('gainsboro');
});

$('#six').click(function(){
  $(this).toggleClass('mauve');
});