JSFiddle - React, Tailwind, and code Playground

HTML

<aside class="f_left"><!-- 사이드바 -->
		<s_sidebar><!-- 사이드바 영역 -->
			<div id="as_profile" class="div_clearboth"><!-- 프로필 -->
				<s_sidebar_element>
					<div id="profile" class="div_clearboth">
						<div id="profile_profile">
							<img src="[##_image_##]" alt="프로필 사진" />
							<p><span class="span_bold">[##_blogger_##]</span></p>
							<p><span>[##_desc_##]</span></p>
						</div>
						<div id="profile_control">
							<ul class="ul_nonstyle">
								<li class="f_left"><a href="[##_owner_url_##]">관리</a><img src="./images/img_li_profile.png" /></li>
								<li class="f_left"><a href="[##_owner_url_##]/entry/post">글쓰기</a><img src="./images/img_li_profile.png" /></li>
							</ul>
						</div>
					</div>
				</s_sidebar_element>
			</div>
			<div id="as_notice" class="div_clearboth"><!-- 공지사항 -->
				<s_sidebar_element>
					<div id="notice">
						<s_rct_notice>
							<ul class="ul_nonstyle">
								<s_rct_notice_rep>
									<li class="li_overflip"><img src="./images/img_li_notice.png" alt="공지사항" /><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></li>
								</s_rct_notice_rep>
							</ul>
						</s_rct_notice>
					</div>
				</s_sidebar_element>
			</div>
			<div id="as_category" class="div_clearboth"><!-- 카테고리 -->
				<s_sidebar_element>
					<div id="category">
						<h3>카테고리</h3>
						<div id="category_ul">
							[##_category_list_##]
						</div>
					</div>
				</s_sidebar_element>
			</div>
			<div id="as_recent" class="div_clearboth"><!-- 최근 활동 -->
				<s_sidebar_element>
					<div id=""></div>
				</s_sidebar_element>
			</div>
			<div id="as_search" class="div_clearboth"><!-- 검색창 -->
				<s_sidebar_element>
					<div id=""></div>
				</s_sidebar_element>
			</div>
			<div id="as_count" class="div_clearboth"><!-- 방문자수 집계 -->
				<s_sidebar_element>
					<div id=""></div>
				</s_sidebar_element>
			</div>
		</s_sidebar>
	</aside>

CSS

@CHARSET "UTF-8";

/* 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 ; /*클릭한 링크 다크그레이 */ }
.span_bold { font-weight : bold ; /* 글자 굵게 */ }
.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 ; }

/* semantics */
body { width : 1000px ; /* body 가로폭 1000px */
	   margin : 0 auto ; /* body 가운데 정렬  */
	   font-family : 'Nanum Gothic', sans-serif ; /* 폰트 나눔고딕 */ }
header, section, nav, footer { display : block ; /*블럭 요소 지정 */ }
aside, article { display : inline-block ; /*인라인-블럭 요소 지정 */ }

/* header */
header { height : 250px ; /* header 세로폭 */ }

#logo { height : 250px ; /* logo 클래스 세로폭 */ }
.logo_main { margin-bottom : 5px ; /* 아래 마진 5px */ }

/* section */
section

nav { height : 45px ; }
#an_menu { width : 1000px ;
		   height : 45px ;
		   display : table ; }
.menu_add { margin-left : 5px ; }

aside { width : 160px ;
		margin-right : 35px ; }
#profile_profile img { width : 160px ; }
#profile_control li { margin-right : 2px ; }
#profile_control li a { font-size : 9pt ;
						color : gray ; }
#notice ul li { width : 160px ; }

/* footer 
}*/


#as_profile {
    background: orange;
  
}


footer