JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bootswatch.com/amelia/bootstrap.min.css">
<div class="container">
<h2>Styled tabs using :target and CSS3 gradients</h2>
<article class="tabs">
<section id="tab1">
<h2><a href="#tab1">Tab 1</a></h2><img src="http://pcdn.500px.net/14519139/68c00f176d3ffa7a05e66f2e6c5592985eeebf57/3.jpg" alt="" /></section>
<section id="tab2"><h2><a href="#tab2">Tab 2</a></h2><img src="http://pcdn.500px.net/14519469/902f881359d08e47b7a173b6907677d6ab99ca1b/4.jpg" alt="" />
</section>
<section id="tab3"><h2><a href="#tab3">Tab 3</a></h2><img src="http://pcdn.500px.net/14519447/7d525591dd9a92a68b873bd8d412f2bb4cea98d7/4.jpg" alt="" /></section>
<section id="tab4">
<h2><a href="#tab4">Tab 4</a></h2>
<iframe width="560" height="315" src="http://www.youtube.com/embed/0a3xYJsB1cM" frameborder="0" allowfullscreen></iframe></section>
<section id="tab5">
<h2><a href="#tab5">Tab 5</a></h2>
<img src="http://pcdn.500px.net/14517509/a15c8557c3260b4101230247cc8de9b23cb9bb22/4.jpg" alt="" /></section>
</article>
</div>
<footer class="footer">
    Read more here: Blog post by Peter Terkildsen: "<a href="http://pterkildsen.com/2012/09/24/creating-pure-css-based-tabs/">Creating pure CSS-based tabs</a>"
</footer>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

CSS

article.tabs {width:617px;margin: 10px; border-radius: 10px; padding: 10px; background: rgba(200,200,200,.4); float: left;}
article.tabs a {color: black; line-height: 2em; display: block; padding: 0px 0px 0px 15px; }
article.tabs a:hover {text-decoration: none;}
article.tabs section h2 {
width: 200px;
    height: 2em;
    float: left;
    clear: both;
    position: relative;
    margin: 0px;
   
  }
article.tabs section img, article.tabs section iframe {
    float: left;
    display: none;
    position: absolute;
    z-index: 10;
    margin-left: 200px;
    max-height: 300px;
}
article.tabs section:target img, article.tabs section:target iframe {
    display: block;
    width: 400px;
}
article.tabs section:target h2, article.tabs section:hover h2
{
    color: #FFF;
    background-color: #e21414;
    background: #F15931;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNTkzMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNDM0MGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #F15931 0%, #D4340A 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F15931), color-stop(100%,#D4340A)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #F15931 0%,#D4340A 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #F15931 0%,#D4340A 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #F15931 0%,#D4340A 100%); /* IE10+...

JavaScript

window.location.hash = '#tab2';