JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div id = "file_div" class = "icon">
    <label class = "icon_label">
        <input type = "file" class = "data_file" required>
        <img src = "somePicture" alt = "">
    </label>
</div>

SCSS

input[type='checkbox']{
						display: none;
					}
					label:before {
						display: inline-block;
					    width: 20px;
					    height: 20px;
					    content: '';
					    background-color: transparent;
					    background: url(../images/check-white.png) no-repeat left;
					    margin-left: -30px;
					    vertical-align: middle;
					}
					label {
						line-height: 30px;
    					padding-left: 30px;
    					span {
    						margin-left: 10px;
    					}
					}
					input[type='checkbox']:checked + label:before {
						background: url(../images/check-white.png) no-repeat left;
					}