JSFiddle - React, Tailwind, and code Playground
HTML
<div class="account__file">
<input type="file" name="file" id="file" />
<label for="file">
<span class="account__subtitle">drag & drop</span>
<div class="account__text">
<p>Upload only png, jpg, jpeg</p>
</div>
</label>
</div>
CSS
.account {
width: 100%;
}
.account__wrap {
max-width: 800px;
margin: 0 auto;
}
.account__info {
font-size: 12px;
line-height: 1.2;
color: #808080;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 34px;
font-weight: normal;
}
.account__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.account__title {
font-size: 36px;
color: #3281f2;
text-transform: uppercase;
font-weight: 900;
}
.account__button {
position: relative;
cursor: pointer;
display: block;
width: 30px;
height: 30px;
background-color: #fff;
border: none;
outline: none;
}
.account__button:after,
.account__button:before {
content: '';
position: absolute;
}
.account__button:after {
top: calc(50% - 2px);
right: 15px;
width: 12px;
height: 12px;
border-bottom: 2px solid #3281f2;
border-left: 2px solid #3281f2;
transform: rotate(45deg) translateY(-50%);
transition: 0.3s border;
}
.account__button:before {
top: 50%;
transform: translateY(-50%);
right: 5px;
width: 20px;
height: 2px;
background-color: #3281f2;
transition: 0.3s background-color;
}
.account__button:hover:after {
border-color: #133059;
}
.account__button:hover:before {
background-color: #133059;
}
.account .status__item--content {
background-color: #fff;
}
.account__file {
width: 230px;
padding: 0 20px;
padding-top: 75px;
border: 2px dashed #8eb9f5;
}
.account__file input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.account__subtitle {
display: block;
font-size: 24px;
color: #319bff;
text-align: center;
padding-bottom: 17px;
font-weight: 700;
text-transform: uppercase;
}
.account__text {
padding-bottom: 80px;
}
.account__text p {
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #b6b6b6;
}