JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="input">
    <input type="file">
    <svg xmlns="http://www.w3.org/2000/svg" width="524" height="50" viewBox="0 0 524 50">
      <g id="Rectangle_1537" data-name="Rectangle 1537" fill="#fff" stroke="rgba(145,153,180,0.7)" stroke-width="1" stroke-dasharray="5 5">
        <rect width="524" height="50" rx="8" stroke="none"/>
        <rect x="0.5" y="0.5" width="523" height="49" rx="7.5" fill="none"/>
      </g>
    </svg>
    <h2>ფაილის დამატება</h2>
    <img src="file:///C:/Users/Luka/Desktop/Rectangle%201537.png" alt="">
</div>
<input type="checkbox" id="test">

CSS

.input {
    max-width: 524px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.input img {
    width: 100%;
    position: relative;
    z-index: 100;  
}
.input svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.input h2 {
    position: absolute;
    z-index: 2;
    margin: 0;
    pointer-events: none;
}
.input input {
    z-index: 3;
    position: relative;
    width: 100%;
    height: 100%;
    outline: none;
    visibility: hidden;
}
@media (max-width: 500px){
    
}
#test {
    width: 50px;
    height: 50px;
}