JSFiddle - React, Tailwind, and code Playground
by Ариан Шапиро
HTML
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
#tabs {
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#tabs li {
margin: 0;
padding: 0;
float: left;
}
#tabs a {
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: -moz-linear-gradient(225deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(225deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(225deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(225deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(225deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
color: #fff;
float: left;
font: bold 12px/35px'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}
#tabs a:hover {
background: #c93434;
background: -moz-linear-gradient(225deg, transparent 10px, #c93434 10px);
background: -webkit-linear-gradient(225deg, transparent 10px, #c93434 10px);
background: -ms-linear-gradient(225deg, transparent 10px, #c93434 10px);
background: -o-linear-gradient(225deg, transparent 10px, #c93434 10px);
background: linear-gradient(225deg, transparent 10px, #c93434 10px);
}
...