JSFiddle - React, Tailwind, and code Playground

HTML

<span class="customInputFile">
    	<div id="fileUpdate">
    		<div id="fileUpdate-left">
    			Anexe o seu currĂ­culo
    		</div>
    		<div id="fileName"></div>
    	</div>
    	<input type="file">
    </span>

CSS

.customInputFile{
    	display: block;
        margin: 0 0 10px 0;
        cursor: pointer;
    }
    .customInputFile input[type="file"] {
        display: none;
    }
    .customInputFile #fileUpdate {
    	background: rgb(114,191,68);
        display: block;
        padding: 25px 0; 
        color: rgb(255,255,255);
        text-align: center;
        overflow: auto;
    }
    .customInputFile #fileUpdate #fileUpdate-left{
    	display: inline-block;
    	width: 190px;
    	font-size: 20px;
    	line-height: 23px;
        font-family: 'museo_sans500';
        text-transform: uppercase;
        text-align: left;
    }

JavaScript

$('#fileUpdate').on("click", function() {
    	$(this).next('input[type="file"]').click();
    	$(this).next('input[type="file"]').change( function(){
        	fileName = $(this).val().replace(/C:\\fakepath\\/i, '')
        	$('#fileName').text(fileName).animate({
        		marginTop: '13px'
        	});
    	});
    });