JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div class="artwork-info">
<h1>작품정보를 작성해주세요</h1>
<form class="form">
	<p class="recommended-size">권장 사이즈 400X250</p>
	<div class="input-group">
		<input type="text" class="input input-upload" placeholder="이미지 첨부">
		<input type="file" class="btn upload" id="fileUpload">
		<label for="fileUpload" class="fileUpload">파일 선택</label>
	</div>
	<div class="input-group">
		<input type="text" class="input" placeholder="작품 명을 입력해주세요">
	</div>
	<div class="input-group">
		<textarea class="input input-large" placeholder="작품 소개를 입력해주세요 (글자수 제한)"></textarea>
	</div>
	<div class="input-group">
		<input type="text" class="input" placeholder="가격을 입력해주세요">
	</div>
	<div class="input-group">
		<input type="text" class="input" placeholder="작가를 입력해주세요">
	</div>
	<div class="input-group">
		<textarea class="input input-large" placeholder="작품 설명을 해주세요"></textarea>
	</div>
	<div class="button-group">
		<button type="submit" class="btn btn-small">등록</button>
		<button type="reset" class="btn btn-small">취소</button>
	</div>
</form>
</div>

CSS

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: 'Inter', sans-serif;
}

.artwork-info {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
gap: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
width: 1000px;
margin: 0 20px;
}

.artwork-info h1 {
font-size: 40px;
margin-bottom: 10px;
text-align: center;
}

.input-group {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 10px;
}

.input-group .input {
flex: 1;
/* margin-right: 35px; */
}

.fileUpload {
display: flex;
justify-content: center;
align-items: center;
padding: 0.1px;
background-color: #333D41;
color: white;
cursor: pointer;
border-radius: 6px;
font-size: 12px;
width: 200px;
height: 60px;
margin-left: 5px;
}


.image-upload {
display: flex;
justify-content: flex-start;
align-items: center;
width: 300px;
height: 300px;
border: 3px dashed #ccc;
padding: 60px;
box-sizing: border-box;
margin-right: auto;
}

.input-group .input {
/* flex: 2px;
margin-right: 10px;
margin-left: -10px; */
}

.btn.upload {
display: none;
}

.input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}

.input.input-large {
height: 120px;
}

.btn {
width: 200px;
height: 63px;
background: #333D41;
border-radius: 6px;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
margin: 5px;
}

.form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 20px;
}

.button-group {
display: flex;
justify-content: center;
width: 100%;
margin-top: 20px;
gap: 5px;
}