JSFiddle - React, Tailwind, and code Playground

by thillin

HTML

<body>
	<div class="triangle"></div>
	<div class="circle"></div>
	<div class="symbol" style="background: pink; height: 40px; width: 40px;"></div>

</body>

CSS

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 20px 34.64px 20px;
border-color: transparent transparent #007bff transparent;
}
.symbol.circle, .circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: red;
}
.squircle {
	width: 40px;
	height: 40px;
	border-radius: 10%;
	background: green;
}

JavaScript

var shapes = [triangle, circle, squircle]
var shape = shapes[0];
$(document).ready(function () {
    $('.symbol').click(function () {
        alert(shape);
        $(this).addClass(shape);
    });
});