JSFiddle - React, Tailwind, and code Playground
by Samir Chaves
HTML
<link rel="stylesheet" type="text/css" href="https://cadastro.r7.com/css/reset.css">
<div class="r7-main-navigation record">
<div><ul class="menu">
<li class="item-1">
<h3 title="Ir para o R7">
<a href="http://r7.com/">R7.com</a>
</h3></li>
<li class="item-2">
<h3 title="Ir para o R7 notícias">
<a href="http://noticias.r7.com">Notícias</a>
</h3></li>
<li class="item-3"><h3 title="Ir para o R7 entretenimento">
<a href="http://entretenimento.r7.com">Entretenimento</a>
</h3></li><li class="item-4"><h3 title="Ir para o R7 esportes">
<a href="http://esportes.r7.com">Esportes</a></h3>
</li>
<li class="item-5"><h3 title="Ir para o R7 vídeos">
<a href="http://videos.r7.com">Vídeos</a>
</h3></li>
<li class="item-6"><h3 title="Ir para o site da Rede Record"><a href="http://www.rederecord.com.br">Rede Record</a></h3></li><li class="item-7"><h3 title="Ir para a página de Shopping">
<a href="http://shopping.r7.com">Shopping</a>
</h3></li><li class="item-8">
<h3 title="Ir para a página de e-mail"><a href="http://email.r7.com">E-mail</a></h3>
</li></ul><ul class="social"><li class="item-1" title="Faça do R7 sua página inicial">
<a href="http://www.r7.com/institucional/faca-do-r7-sua-pagina-inicial/" target="_blank">Faça do R7 sua página inicial</a></li><li class="item-2" title="Visite o R7 no Facebook">
<a href="http://www.facebook.com/campaign/landing.php?campaign_id=235286759835862&url=http://www.facebook.com/portalr7" target="_blank">Visite o R7 no Facebook</a></li>
<li class="item-3" title="Siga o R7 no Twitter">
<a href="http://www.twitter.com/portalr7" target="_blank">Siga o R7 no Twitter</a></li>
<li class="item-4" title="Agentto"><a href="http://www.r7.com/agentto/" target="_blank">Agentto</a></li>
<li class="item-5" title="Receba notícias do R7"><a href="http://www.r7.com/institucional/rss/rss.html" target="_blank">Receba notícias do...CSS
.r7-main-navigation, .r7-main-navigation .menu LI, .r7-main-navigation .menu LI H3, .r7-main-navigation .social A { background-image:url("http://sc.r7.com/header-record/img/r7.main.navigation.png"); } .r7-main-navigation { font-family:"Trebuchet MS", "Arial", "Helvetica", sans-serif; font-size:10px; height:40px; overflow:hidden; } .r7-main-navigation DIV { position:relative; width:998px; height:40px; left:50%; margin:0px 0px 0px -499px; overflow:hidden; } .r7-main-navigation A { text-decoration:none; } .r7-main-navigation A:hover { text-decoration:underline; } .r7-main-navigation UL { margin:0px; padding:0px; list-style-type:none; float:left; } .r7-main-navigation, .r7-main-navigation .menu LI H3 { background-position:left top; background-repeat:repeat-x; } .r7-main-navigation .menu LI H3 { float:left; margin:0px; font-size:2.0em; font-weight:bold; padding-right:12px; background-position:left top; background-repeat:repeat-x; } .r7-main-navigation .menu A { float:left; line-height:40px; height:40px; letter-spacing:-1px; } .r7-main-navigation LI { float:left; } .r7-main-navigation .menu LI { background-position:left -40px; padding:0px 1px 0px 0px; margin-right:12px; } .r7-main-navigation * {outline:0px;} .r7-main-navigation A { display:block; } .r7-main-navigation, .r7-main-navigation DIV { zoom:1; } .r7-main-navigation:after, .r7-main-navigation DIV:after { display:block; clear:both; content:"."; height:0px; visibility:hidden; } .r7-main-navigation .social A { width:32px; height:32px; text-indent:-99999px; overflow:hidden; color:transparent; margin:0px 4px 0px 0px; background-repeat:no-repeat; } .r7-main-navigation .social .item-1 A { background-position:left -80px; } .r7-main-navigation .social .item-2 A { background-position:-32px -80px; } .r7-main-navigation .social .item-3 A { background-position:-64px -80px; } .r7-main-navigation .social .item-4 A { background-position:-96px -80px; } .r7-main-navigation .social .item-5 A { background-position:-128px -80px; }...