JSFiddle - React, Tailwind, and code Playground

by Mingi Choi

HTML

<div id="guest_tabs">
						<!-- 라디오 -->
						<input type="radio" id="tab1" name="tab" checked="checked" />
						<input type="radio" id="tab2" name="tab" />
						<!-- 라벨 -->
						<label class="guest_tabtn" for="tab1">소셜 방명록</label>
						<label class="guest_tabtn" for="tab2">티스토리 방명록</label>
						<!-- 각 탭 내용 -->
						<div class="guest_tab1">
							<!-- 소셜 방명록 -->
							<p>여기에 소셜 방명록 코드를 붙여넣어 주세요.</p>
						</div>
						<div class="guest_tab2">
							<!-- 티스토리 방명록 -->
							<div class="guest_tistory">
								<div class="guest_tistory_write">
									<s_guest_input_form>
										<div class="g_write">
											<s_guest_member>
												<s_guest_form>
												<div class="write_input_info">
													<input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" placeholder="이름" />
													<input type="text" name="[##_guest_input_password_##]" value="[##_guest_password_##]" maxlength="8" placeholder="비밀번호" />
													<input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" placeholder="홈페이지" />
												</div>
												</s_guest_form>
											</s_guest_member>
											<div class="write_input_cont">
											<textarea class="write_input_cont_textarea" name="[##_guest_textarea_body_##]" cols="50" rows="6"></textarea>
											<input type="submit" value="올리기" onclick="[##_guest_onclick_submit_##]" />
											</div>
										</div>
									</s_guest_input_form>
								</div>
								<div class="guest_tistory_list">
									
								</div>
							</div>
						</div>
					</div>

CSS

input[type="radio"] { display : none ; }

#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(2) { display : none ; } 
#guest_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2) { display : block ; }
#guest_tabs label:hover { background : ghostwhite ; }
#guest_tabs input[type="radio"]:checked+label { background : ghostwhite ; }
.write_input_cont_textarea { width : 700px ; }
.guest_tab1, .guest_tab2 { background : ghostwhite ; }