JSFiddle - React, Tailwind, and code Playground

by Mingi Choi

HTML

<header>
	<div class="header">
		<a href="[##_blog_link_##]"><img id="logo" src="./images/img_logo.png" alt="코드공작소" /></a>
	</div>
	<div class="na_btn">
		<a href="#" onclick="showMenu()"><img src="./images/img_mobile_menu.png" alt="메뉴" /></a>
	</div>
	<div class="na_close">
		<a href="#" onclick="closeMenu()">X</a>
	</div>
	<nav>
		<div class="na_cate">
			<ul class="cate_list">
				<li class="cate_top">
					<a href="[##_blog_link_##]">HTML</a>
					<ul class="cate_sub">
						<li><a href="[##_blog_link_##]">강의</a></li>
						<li><a href="[##_blog_link_##]">사전</a></li>
						<li><a href="[##_blog_link_##]">작업물</a></li>
					</ul>
				</li>
				<li class="cate_top">
					<a href="[##_blog_link_##]">CSS</a>
					<ul class="cate_sub">
						<li><a href="[##_blog_link_##]">강의</a></li>
						<li><a href="[##_blog_link_##]">사전</a></li>
						<li><a href="[##_blog_link_##]">작업물</a></li>
					</ul>
				</li>
				<li class="cate_top">
					<a href="[##_blog_link_##]">PHP</a>
					<ul class="cate_sub">
						<li><a href="[##_blog_link_##]">강의</a></li>
						<li><a href="[##_blog_link_##]">사전</a></li>
						<li><a href="[##_blog_link_##]">작업물</a></li>
					</ul>
				</li>
				<li class="cate_top">
					<a href="[##_blog_link_##]">C</a>
					<ul class="cate_sub">
						<li><a href="[##_blog_link_##]">강의</a></li>
						<li><a href="[##_blog_link_##]">사전</a></li>
						<li><a href="[##_blog_link_##]">작업물</a></li>
					</ul>
				</li>
				<li class="cate_top">
					<a href="[##_blog_link_##]">JAVA</a>
					<ul class="cate_sub">
						<li><a href="[##_blog_link_##]">강의</a></li>
						<li><a href="[##_blog_link_##]">사전</a></li>
						<li><a href="[##_blog_link_##]">작업물</a></li>
					</ul>
				</li>
				<li class="cate_top">
					<a href="[##_blog_link_##]">PYTHON</a>
					<ul class="cate_sub">
						<li><a href="[##_blog_link_##]">강의</a></li>
						<li><a href="[##_blog_link_##]">사전</a></li>
						<li><a href="[##_blog_link_##]">작업물</a></li>
					</ul>
				</li>
				<li...

CSS

body { width : 1100px ;
	   margin : 0 auto ; }
	   
header { width : 1100px ; }

nav { border-top : 1px solid #f1f1f1 ; }
.na_btn { display : none ; }
.na_close { display : none ; }
.na_cate { margin : 20px 0 ; }
.na_cate ul { list-style : none ;
			  text-align : center ;  }
.na_cate ul li { display : inline-block ; }
.cate_top { display : inline-block ;
			width : 100px ; }
.cate_top ul li { display : block ;
				  height : 25px ; }
.cate_top ul li:hover { background : #202020 ; }
.cate_top ul li a:hover { color : white ; }
.cate_sub { display : none ;
			margin-top : 10px ; }

* { margin : 0px ;
	padding : 0px ; }

body { font-family : 'Nanum Gothic', sans-serif ;
	   background : #f8f8f8 ;
	   height : 2000px ; }
a:link { text-decoration : none ;
		 color : black ; }
a:visited { text-decoration : none ;
			color : black ; }
a:hover { color : gray ; }
a:active { color : darkgray ; }
	   
header { position : fixed ;
		 border-bottom : 1px solid #f1f1f1 ;
background : #f8f8f8 ;}
.header img { display : block ;
			  margin-left : auto ;
			  margin-right : auto ;
			  margin-top : 50px ;
			  margin-bottom : 50px ; }

.na_close { display : none ;
			position : absolute ;
			top : 20px ;
			left : 180px ;
			z-index : 2 ; }	

section { margin-top : 250px ; }