JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div class="arrow-down" onclick="this.classList.toggle('change');">Hello</div>

CSS

* {font-family: 'Segoe UI';}
.arrow-down {display: inline-block; border: 1px solid #ccc; padding: 5px; line-height: 1; background-color: #00f; color: #fff; position: relative; cursor: pointer;}
.arrow-down::after {content: '▾'; float: right; margin-left: 10px;}
.arrow-down.change::after {content: '▴';}
.arrow-down.change::after {content: '◆';}
.arrow-down.change::before {content: '-'; color: #00f; position: absolute; right: 5px; top: -1px; font-size: 1.5em;}