JSFiddle - React, Tailwind, and code Playground
by levchenko_d
HTML
<div><span class="file-ext file-ext-aif"></span></div>
<div><span class="file-ext file-ext-cda"></span></div>
<div><span class="file-ext file-ext-mid"></span></div>
<div><span class="file-ext file-ext-mp3"></span></div>
<div><span class="file-ext file-ext-mpa"></span></div>
<div><span class="file-ext file-ext-ogg"></span></div>
<div><span class="file-ext file-ext-wav"></span></div>
<div><span class="file-ext file-ext-wma"></span> </div>
<div><span class="file-ext file-ext-wpl"></span></div>
<div><span class="file-ext file-ext-7z"></span></div>
<div><span class="file-ext file-ext-arj"></span></div>
<div><span class="file-ext file-ext-deb"></span></div>
<div><span class="file-ext file-ext-pkg"></span></div>
<div><span class="file-ext file-ext-rar"></span></div>
<div><span class="file-ext file-ext-rpm"></span></div>
<div><span class="file-ext file-ext-tar.gz"></span></div>
<div><span class="file-ext file-ext-z"></span></div>
<div><span class="file-ext file-ext-zip"></span></div>
<div><span class="file-ext file-ext-bin"></span></div>
<div><span class="file-ext file-ext-dmg"></span></div>
<div><span class="file-ext file-ext-iso"></span></div>
<div><span class="file-ext file-ext-toast"></span></div>
<div><span class="file-ext file-ext-vcd"></span></div>
<div><span class="file-ext file-ext-csv"></span></div>
<div><span class="file-ext file-ext-dat"></span></div>
<div><span class="file-ext file-ext-db"></span></div>
<div><span class="file-ext file-ext-log"></span></div>
<div><span class="file-ext file-ext-mdb"></span></div>
<div><span class="file-ext file-ext-sav"></span></div>
<div><span class="file-ext file-ext-sql"></span></div>
<div><span class="file-ext file-ext-tar"></span></div>
<div><span class="file-ext file-ext-xml"></span></div>
<div><span class="file-ext file-ext-apk"></span></div>
<div><span class="file-ext file-ext-bat"></span></div>
<div><span class="file-ext file-ext-bin"></span></div>
<div><span class="file-ext...CSS
.file-ext.file-ext-aif:after{content:"aif"; color: #fff;}
.file-ext.file-ext-aif{background: rgb(13,185,66); background: -moz-linear-gradient(top, rgba(13,185,66,1) 0%, rgba(13,165,64,1) 100%); background: -webkit-linear-gradient(top, rgba(13,185,66,1) 0%,rgba(13,165,64,1) 100%); background: linear-gradient(to bottom, rgba(13,185,66,1) 0%,rgba(13,165,64,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0db942', endColorstr='#0da540',GradientType=0 );}
.file-ext.file-ext-cda:after{content:"cda"; color: #fff;}
.file-ext.file-ext-cda{background: rgb(166,74,28); background: -moz-linear-gradient(top, rgba(166,74,28,1) 0%, rgba(152,68,27,1) 100%); background: -webkit-linear-gradient(top, rgba(166,74,28,1) 0%,rgba(152,68,27,1) 100%); background: linear-gradient(to bottom, rgba(166,74,28,1) 0%,rgba(152,68,27,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a64a1c', endColorstr='#98441b',GradientType=0 );}
.file-ext.file-ext-mid:after{content:"mid"; color: #fff;}
.file-ext.file-ext-mid{background: rgb(13,185,66); background: -moz-linear-gradient(top, rgba(13,185,66,1) 0%, rgba(13,165,64,1) 100%); background: -webkit-linear-gradient(top, rgba(13,185,66,1) 0%,rgba(13,165,64,1) 100%); background: linear-gradient(to bottom, rgba(13,185,66,1) 0%,rgba(13,165,64,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0db942', endColorstr='#0da540',GradientType=0 );}
.file-ext.file-ext-mp3:after{content:"mp3"; color: #fff;}
.file-ext.file-ext-mp3{background: rgb(166,74,28); background: -moz-linear-gradient(top, rgba(166,74,28,1) 0%, rgba(152,68,27,1) 100%); background: -webkit-linear-gradient(top, rgba(166,74,28,1) 0%,rgba(152,68,27,1) 100%); background: linear-gradient(to bottom, rgba(166,74,28,1) 0%,rgba(152,68,27,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a64a1c', endColorstr='#98441b',GradientType=0 );}
.file-ext.file-ext-mpa:after{content:"mpa"; color:...JavaScript
x = {};
document.querySelectorAll('.file-ext').forEach(i=>{
var s = getComputedStyle(i);
var k = i.className.replace('file-ext file-ext-','').trim();
x[k] = s.background.replace(/(.*)(\%, (rgb\([0-9]{1,3},\s[0-9]{1,3},\s[0-9]{1,3}\)))(.*)/gm, '$3');
});
console.log(JSON.stringify(x));