JSFiddle - React, Tailwind, and code Playground
HTML
<button href="#" class="search no-style search-active" style="display: inline-block;">
<div class="pointer" style="display:none">::after</div>
</button>
CSS
.primary .search:after,
.primary .search[data-search="disabled"]:after {
color: #fff;
content: "\E8B6";
font-family: "Material Icons";
position: absolute;
top: -25px;
transition: color .3s;
font-size: 26px;
margin-left: -10px;
}
//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON
.search-active {
background-color: purple;
padding: 12px 33px 19px 35px;
margin: 0px -30px;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url('data:font/woff2;base64,d09GMgABAAAAAKVAAA8AAAAB4owAAKTkAAECTQAAAAAAAAAAAAAAAAAAAAAAAAAAGiQbNhyByGgG YACLHggEEQgKhcwIhJllATYCJAOOTguOSgAEIAWCfgcgWxaBUaO6NYMLum0A8OrOd8W2k+nmTrkd IvMuPmI2IoaNAwY4FGP2/5+TdIzhxt8AlepmPciDUtnQR439GCcNV3pgF0Vz7J06/EcTgcMqv4wd 674GLzwz86bxtZIpff43o6qqkvrm1rxXBAWcekPObIIQOoU4/g2RKMhFp7cFL7SeSAjPgH8yN3vy y0KTKUuQtI0sGeXWrpApmZKp1/lQiFzkkiAILhrCSw9d5OTsGAtBYT+28BjvtBeBjcsYycrJy9PH frye3fs+gkxadoAusoBCEqEikCgMja9RddEl2+j8v+m/jMvIggsk+SF5PCDJz+taQlfo6qVEhaqr MK7H934467crDoFJoAHCMtA25+JfRPWZ+P3fWnrN0IfB3buEn28VuaoKVQUMCkEFqwBQEaMiMBlq dfuMxAAKVmxMsFOutPZ9CE+7dOngTmoGqYPsF5jWe3NQN5nrz3XvxTUVC5YK5mkLnrmcdr67XMsv k3J1ptIi5Tm9pz0AymyB8GzNtowKyFXWutapGl0niP43l6Vs5qbIQ4Dt7n2BzbwS36ZJSYr0aPvJ ihC/wv9/HLTz7oeFkqiZRNPUEgl9Y9/j+dxsOATCmR/yA4QjISCQ98IlBBWQfCBcCcr13+fwAEFQ EhUPBLTW/1etgL1sN6FAD4+e/Nja3Xp0xTb0OKHXbpJ2j2i7XduCa9zD1p7m/3+X+r9P+ndO8icw JHHBoJFMAXJm5HKA7PEBx/PIUd35+ZV+pdU/gaFlw4Ch5cBAiGsngvteHvvC29ToeuKvPeee35o4 QTKcDbb7/lfuL1+ECXjvoLp9wSckXruo1o1LxaVwKdwKsUG0EB3EevPwzRPrw5s884Jt4kS56via 6s/sfpx5r2Wnn1hQJMtFkOUBS3ux9JLs5aq97l6tOCVwSkS2VcIfC/TclsDVB/rIV2Mu3IA9FPTw V5v9+P7idqnfl+gEHkYSeJhlNf+marUYcqlHOmKzvHtB21G7ueguB1VXVX/+DAbz/8cHOX/4QWAg 0AiiDAKijBkQNgCKsgACMAVx74EgKccs+91pUx4Apg4kFQjScsjakKvLlaO0Ub6cupCKcsu9srv+ 6ubK69pr+vPf99O01Yu8iNnpXZ23pXLRbr01VZt17r88D1+Xly8aht7+PH1gRIrwMDRhyANXAfhI...
JavaScript
$(".search").on("click", function() {
$(this).toggleClass('search-active');
});