JSFiddle - React, Tailwind, and code Playground

by Łukasz Bącik

HTML

<div class="navbar">
  <a class="menu" href="#"><i class="icon-align-justify"></i></a>
  <a class="link" href="#">
    <span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
    <span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
  </a>
  <a class="link" href="#">
    <span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
    <span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
  </a>
  <a class="link" href="#">
    <span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
    <span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
  </a>
</div>

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body,html{height:100%;}body{color:#fff;margin:0 auto;font:1em/1.3em Montserrat,Helvetica,sans-serif;}.clearfix{clear:both;}.container{height:100%;width:100%;text-align:center;background-color:#fb887c;}h1{margin:40px 0;font-size:40px;line-height:40px;font-weight:bold;text-shadow:0px 1px 1px #888;}a{text-decoration:none;color:#fff;margin:0 10px;}.btn{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;display:inline-block;padding:10px 20px;height:50px;background-color:#e55647;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-webkit-box-shadow:0 3px 0 0 #d24536;box-shadow:0 3px 0 0 #d24536;line-height:30px;font-size:16px;font-weight:bold;text-shadow:0px 1px 1px #888;}.btn:active,.btn.active{top:1px;-webkit-box-shadow:0 1px 0 0 #d24536;box-shadow:0 1px 0 0 #d24536;}.btn.submit{font-size:12px;height:30px;line-height:30px;padding:0 10px;margin:0;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}.btn-small{height:30px;font-size:12px;line-height:10px;}a.btn-small...