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" />
						<!-- 라벨 -->
						<div class="guest_tabs_label">
							<div class="label_con">
							<label for="tab1">소셜 방명록</label>
							<label for="tab2">티스토리 방명록</label>
							</div>
						</div>
						<!-- 각 탭 내용 -->
						<div class="guest_tab1">
							<!-- 소셜 방명록 -->
							<p>여기에 소셜 방명록 코드를 붙여넣어 주세요.</p>
						</div>
						<div class="guest_tab2">
							<!-- 티스토리 방명록 -->
							<br/>
							<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" placeholder="방명록을 남기세요."></textarea>
												<span>티스토리 계정이 없으신 분들은 소셜 방명록을 이용해주세요.</span>
												<input type="submit" value="올리기" onclick="[##_guest_onclick_submit_##]" />
											</div>
										</div>
									</s_guest_input_form>
								</div>
								<div class="guest_tistory_list">
									<s_guest_container>
										<div class="list_g">
											<ul class="ul_nonstyle g_post">
												<li id="[##_guest_rep_id_##]">
													<div class="[##_guest_rep_class_##]">
														<span class="g_name">[##_guest_rep_name_##]</span>
														<span...

CSS

* { margin : 0 ; 
	padding : 0 ;}

.ul_nonstyle { list-style : none ; }
.li_floatleft { float : left ;
				margin : 5px 5px 0px 0px ; }
.floatleft { float : left ; }
a:link { color : black ;
		 text-decoration : none ; } /* 기본 링크 스타일 */
a:visited { color : black ;
			text-decoration : none ; } /* 방문했던 링크 스타일 */
a:hover { color : gray ; } /* 마우스오버 링크 스타일  */
a:active { color : darkgray ; } /* 클릭시 링크 스타일  */
h3, p, span { font-size : 11pt ; }
input[type="radio"] { display : none ; }

#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(2),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(3) { display : none ; } 
#guest_tabs input:nth-of-type(1):checked ~ div:nth-of-type(2),
#guest_tabs input:nth-of-type(2):checked ~ div:nth-of-type(3) { display : block ; }
.guest_tabs_label label { color : #bababa ; }
.label_con { display : table-cell ;
			 vertical-align : middle ; }
.guest_tabs_label label:hover { color : #636363 ; }
#guest_tabs input:nth-of-type(1):checked ~ .guest_tabs_label label:nth-of-type(1), #guest_tabs input:nth-of-type(2):checked ~ .guest_tabs_label label:nth-of-type(2) { color : black ;
																																									   padding-bottom : 6px ;
																																									   border-bottom : 2px solid red ;
																																									   border-top : 2px solid white ; }
.write_input_cont_textarea { width : 700px ; }
.guest_tabs_label { display : table ;
					height : 35px ;
					border-bottom : 1px solid whitesmoke ;
					width : 805px ; }
.guest_tab2 { width : 805px ; }
.guest_tistory { width : 785px ; 
				 margin : 0 auto ; }
.write_input_info { margin-bottom : 5px ; }
.write_input_info input { width : 150px ;
						  height : 20px ; }
.write_input_cont textarea { width : 785px ; }
.write_input_cont span { height : 35px ;
						display : inline-block ;
						color : gray ; }
.write_input_cont input { width : 80px ;
						  height : 35px ;
					  	  float : right ;
					  	  border : none ;
					  	  border-radius :...