JSFiddle - React, Tailwind, and code Playground

by Tuấn Phan

HTML

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Menu</span></label>
<ul>
<li><a href='http://feeds.feedburner.com/tuanphanblog' rel='nofollow' title="RSS">RSS</a></li>
<li><a class='prett' href='search/label/Chia%20sẻ' title="Chia sẻ thủ thuật tiện ích blogspot, Microsoft Word 2010, CorelDraw">Chia sẻ</a>
<ul class='menus'>
<li><a href='/search/label/Template' title="Giao diện cho miễn phí đẹp cho blogspot">Template</a></li>
<li><a href='/search/label/HTML5' title="Tiện ích và template chuẩn HTML5">HTML5</a></li>
<li><a href='/search/label/Responsive' title="Giao diện thay đổi theo trình duyệt">Responsive</a></li>
<li><a href='/search/label/CSS' title="Thiết kế chuẩn CSS3">CSS</a></li>
<li><a href='/search/label/jQuery' title="jQuery">jQuery</a></li>
<li><a href='/search/label/CorelDraw' title="Học CorelDraw Online">CorelDraw</a></li>
<li><a href='/search/label/Microsoft%20Office' title="Học Microsoft%20Office Online">Microsoft Office</a></li>
</ul>
</li>
<li><a href='/p/sitemap.html' title="Sitemap">Sitemap</a></li>
<li><a class='prett' href='/search/label/Giải%20trí' title="Chuyên mục giải trí chống xtress">Giải trí</a>
<ul class='menus'>
<li><a href='/search/label/Hài%20kịch' title="Hài kịch">Hài kịch</a></li>
<li><a href='/search/label/Người%20Bí%20Ẩn' title="Người Bí Ẩn">Người Bí Ẩn</a></li>
<li><a href='/search/label/Phim%20ngắn' title="Phim ngắn">Phim ngắn</a></li>
<li><a href='/search/label/Âm%nhạc' title="Âm nhạc">Âm nhạc</a></li>
</ul>
</li>
  <li><a href='/search/label/Ảnh%20đẹp' title="Thư viện ảnh đẹp và hình nền HD">Ảnh đẹp</a></li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=vn%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

CSS

#menu{background:#098047;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc;box-shadow: inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#06703D;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}