JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<div id="wrapper">
    <h2>Diff Icons</h2>
    <div class="icon">
        <span class="camera-icon"></span>
    </div>
    <div class="icon active">
        <span class="camera-icon"></span>
    </div>
    
    <div class="icon">
        <span class="threeD-icon"></span>
    </div>    
    <div class="icon active">
        <span class="threeD-icon"></span>
    </div>    
</div>

CSS

.icon {
    
}

.icon span {
    width: 128px;
    height: 128px;
    display: block;
    background-size: 100%;
    border: 2px solid #999;
    margin: 5px;
    background-color: #ccc;
}

.icon.active span {
    background-color: green;
}

.icon span.camera-icon {
    background-image: url('https://dl.dropboxusercontent.com/u/1414257/Camera.png')
}

.icon span.threeD-icon {
    background-image: url('https://dl.dropboxusercontent.com/u/1414257/3D-view.png')
}