JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
    <li><a href="#tab1">Adobe</a></li>
    <li><a href="#tab2">Dell</a></li>
    <li><a href="#tab3">Acrobat</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <p>Adobe has introduced two new services that it hopes will get the masses using its products again: one that converts and processes PDFs on the Web, and another that allows users to easily send large files to one another. The company announced the two services Friday as part of its push into the cloud, admitting that neither solution was a particularly new concept.</p>
    </div>
    <div id="tab2" class="tab_content">
        <p>Dell is shifting 25,000 of its employees, or one-quarter of its work force, from Research in Motion's BlackBerry to its own Windows Phone 7-powered Venue Pro. The company is still in discussions with T-Mobile USA, the carrier for the Venue Pro, for buying voice and data in bulk.
        </p><p>
"Clearly in this decision we are competing with RIM, because we're kicking them out," Dell's chief financial officer, Brian Gladden, told The Wall Street Journal. Dell reportedly hasn't told RIM executives about the company's plans yet; they're expected to find out from the public media. "We actually had a conversation last night around creating a site on eBay where we can actually sell these BlackBerry devices [that employees return]." </p>
    </div>
    <div id="tab3" class="tab_content">
        <p>It is possible, however, that Adobe might net a few small business accounts with SendNow and CreatePDF. Although you can convert files to PDF by importing them to Google Docs and then e-mailing to yourself or others as a PDF attachment for free, it requires a few more steps than simply using a tool like CreatePDF. Plus, businesses tend to trust Adobe a little more than Google, though that's changing quickly with the popularity of Google Apps. Either way, neither tool is likely to get many casual users to open their wallets, but...

CSS

body {
    font-size: 12px;
    font-family: Arial;
}

p {
    line-height: 1.4em;
    margin-bottom: 1em; 
}

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 10px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}

JavaScript

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    
    if(!$this.hasClass('active')){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
    }
    
    return false;
});