JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Tabbed Structure - Regular</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <script src="/scripts/jquery/jquery.min.1.4.4.js"></script>
    <script src="/scripts/jquery.uniform.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/aristo/uniform.aristo.css" type="text/css" media="screen" charset="utf-8" />

    <script>
      // When the document loads do everything inside here ...
      $(document).ready(function(){
        // When a link is clicked
        $('#appkey').blur(validateKey);
        $('#appkey').keyup(validateKey);
        
        $("a.tab").click(function () {
            // switch all tabs off
            $(".active").removeClass("active");
            
            // switch this tab on
            $(this).addClass("active");
            
            // slide all content up
            $(".content").hide();

            // slide this content up
            var content_show = $(this).attr("title");
            $("#"+content_show).show();
        });
      });
      
      function validateKey(){
        var length = $('#appkey').val().length;    
        if(length != 8){
            $('#appkey').addClass('error');
            $('#appKeyInfo').addClass('error');
            return false;
        }else{
            $('#appkey').removeClass('error');
            $('#appKeyInfo').removeClass('error');
            return true;
        }
      }
    
      
  </script>
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
    <div class="tabbed_area">
    
        
        <ul class="tabs">
            <li><a href="#" title="content_1" id="tab1" class="tab active"></a></li>
            <li><a href="#" title="content_2" id="tab2" class="tab">SMS</a></li>
            <li><a href="#"...

CSS

span.error{  
    color: red;  
}  

span.info{
    font-weight:bold; color:#767676; font-size:0.9em;
}

input#appkey{
    width:170px; margin-left:4px; border:1px solid #cccccc; -webkit-border-radius: 2px; padding:2px; margin-top:4px;
}

label{
    color:#5b5b5b;
}

span#appKeyInfo{
    margin-left: 10px;
    color: #b1b1b1;
    font-size: 11px;
    font-style: italic;
}

input#store{
    background:#cfe1ec; border:1px solid #6e93b0; -webkit-border-radius: 3px; font-weight:bold; color:#285273; padding:5px; padding-left:10px; padding-right:10px;
    background-image:url(images/btnback.png); margin-right:100px;
}
input#store:hover{
    background:#cfe1ec; border:1px solid #6e93b0; -webkit-border-radius: 3px; font-weight:bold; color:#285273; padding:5px; padding-left:10px; padding-right:10px;
    background-image:url(images/btnback2.png); cursor:pointer;
}

input.error{
    background: #f8dbdb;  
    border: 1px solid #efefef;
}

#tabbed_box_1 {
    margin: 0px auto 0px auto;
    width:300px;
}
.tabbed_box h4 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:23px;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.tabbed_box h4 small {
    color:#e3e9ec;
    font-weight:normal;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    position:relative;
    top:-4px;
    left:6px;
    letter-spacing:0px;
}
.tabbed_area {
    border:1px solid #588ca9;
    background-color:#87b4cd;
    padding:8px;    
}

ul.tabs {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tabs li {
    list-style:none;
    display:inline;
}
ul.tabs li a {
    background-color:#588ca9;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #588ca9;
    background-image:url(images/tab_off.jpg);
   ...