JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="input-file-group">
    <!-- 파일명은 아래로 입력 -->
    <input type="text" class="file-name" readonly>
    <!-- input으로 안해도 어차피 텍스트만 들어가서 상관없긴 한데요..  -->
    <!-- <p class="file-name">test.pdf</p> -->
    <label for="text" class="file-label">
        <input type="file" class="input-file">
        <span class="btn">파일찾기</span>
    </label>
</div>

CSS

.file-label {
  .input-file {
    position: absolute;
    opacity: 0;
  }
}