JSFiddle - React, Tailwind, and code Playground

by Mingi Choi

HTML

<div class="post_comment">
							<!-- 댓글 -->
							<s_rp>
								<div class="tabs_con">
									<!-- 라디오 -->
									<input type="radio" id="tab1" name="tab" checked="checked" />
									<input type="radio" id="tab2" name="tab" />
									<!-- 라벨 -->
									<div class="tabs_labels">
										<div class="tabs_labels_con">
											<label for="tab1">소셜 댓글</label>
											<label for="tab2">티스토리 댓글</label>
										</div>
									</div>
									<!-- 각 탭 내용 -->
									<div class="tabs_tab1">
										<div class="useless_con v_center1">
											<!-- 소셜방명록 코드를 여기 삽입하십시오. -->
											<img src="./images/img_ico_needcode.png" />
											<div class="useless_con_span">
												<p><span id="useless_title" class="span_bold">코드를 추가해주세요.</span></p>
												<p><span id="useless_desc">
													방법 보기 버튼을 눌러 방법에 따라 코드를<br/>
													추가해 주셔야 사용이 가능한 기능입니다.<br/>
												</span></p>
												<form action="http://o3omng.com/entry/whiteful-addcode">
													<input type="button" value="방법보기" />
												</form>
											</div>
										</div>
									</div>
									<div class="tabs_tab2">
									<div class="tab2">
										<div class="tab2_list" id="tab2_commn">
											<!-- 티스토리 글 출력 영역 -->
											<s_rp_container>
												<ul class="ul_nonstyle tab2_list_post">
													<s_rp_rep>
														<li id="[##_rp_rep_id_##]">
															<div class="[##_rp_rep_class_##]">
																<span class="head_name">[##_rp_rep_name_##]</span>
																<span class="head_opts">
																	<a href="#" onclick="[##_rp_rep_onclick_reply_##]">답글</a>
																	<a href="#" onclick="[##_rp_rep_onclick_delete_##]">수정</a>
																	<a href="#" onclick="[##_rp_rep_onclick_delete_##]">삭제</a>
																</span>
																<span class="head_date">[##_rp_rep_date_##]</span>
																<p>[##_rp_rep_desc_##]</p>
															</div>
															<s_rp2_container>
																<ul...

CSS

@CHARSET "UTF-8";

/* 
Copyright(c)2014 Mingi Choi All rights reserved
Author Contact : [email protected]
*/

/* commonness */
* { margin : 0px ; /* 마진 0 */
	padding : 0px ; /* 패딩 0 */ }

* { font-size : 11pt ; /* body 태그 폰트 11pt */ }
a:link { color : black ; /* a태그 폰트 색 검정 */
		 text-decoration : none ; /*링크 밑줄 제거 */ }
a:visited { color : black ; /*방문링크 글자색 검정*/
			text-decoration : none ; /* 방문링크 밑줄 제거 */ }
a:hover { color : gray ; /* 마우스 올려놓은 링크 회색 */ }
a:active { color : darkgray ; /*클릭한 링크 다크그레이 */ }
input[type="radio"] { display : none ; }
input[type="text"] { font-size : 10pt ; }
input[type="password"] { font-size : 10pt ; }
textarea { font-size : 10pt ;
		   width : 785px ;
		   margin-bottom : 2px ; }
.span_bold { font-weight : bold ; /* 글자 굵게 */ }
.color_gray { color : gray ; } /* 텍스트 색상 회색 */
.f_left { float : left ; } /* 좌측정렬 */
.f_right { float : right ; } /*우측정렬 */
.h_center1 { margin : 0 auto ; } /* 가로 우측정렬 방법 1 */
.h_center2 { text-align : center ; } /* 가로 우측정렬 방법 2 */
.v_center1 { display : table-cell;
			 vertical-align : middle ; } /* 세로 우측정렬 방법 1 */
.ul_nonstyle { list-style : none; }
.li_overflip { white-space : nowrap ;
			   overflow : hidden ;
			   text-overflow : ellipsis ; } /* 영역 넘어가는 글 자르기 */
.div_clearboth { clear : both ;
				 margin-bottom : 10px ; } /* 영역 구분(엔터) + 아래 10px 마진 */
.display_inlineBlock { display : inline-block  ; /* floated li 대응 */ }
/* 탭 코드 css */
.tabs_con input:nth-of-type(1) ~ div:nth-of-type(2),
.tabs_con input:nth-of-type(2) ~ div:nth-of-type(3) { display : none ; } 
.tabs_con input:nth-of-type(1):checked ~ div:nth-of-type(2),
.tabs_con input:nth-of-type(2):checked ~ div:nth-of-type(3) { display : block ; }
.tabs_labels label { color : #bababa ; }
.tabs_labels_con { display : table-cell ;
			 vertical-align : middle ; }
.tabs_labels label:hover { color : #636363 ; }
.tabs_con input:nth-of-type(1):checked ~ .tabs_labels label:nth-of-type(1), .tabs_con input:nth-of-type(2):checked ~ .tabs_labels...