JSFiddle - React, Tailwind, and code Playground

by mirowin

HTML

<table id="wrapper">
    <tr>
        <td class="tab_link">
            <table width="100%" class="tablechar">
                <tr>
                    <td><a href="#" id="tab1" class="active">Poliester</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab2">Velur / Викинг</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab3">Granite / Призма</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab4">Solano / Пластизол</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab5">Print</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab6">Safari / Cloudy</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab7">Quarzit</a>

                    </td>
                    <td>$99,99</td>
                </tr>
                <tr>
                    <td><a href="#" id="tab8">Agneta</a>

                    </td>
                    <td>$99,99</td>
                </tr>
            </table>
        </td>
        <td>
            <div class="tab_div">
                <div id="con_tab1" class="tab active">
                    <table>
                        <tr>
                            <td>
                                <img src="\data\pages\Image\pokr\poliester.jpg" width="150px" class="cardstyle" style="float:left;margin:5px 5px 5px 5px;"></img>
                            </td>
                            <td>
                                <p><strong>Полиэстер</strong> -...

CSS

@import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin, cyrillic);
   @font-face {
       font-family: bethoven;
       src: url(/fonts/bethoven.ttf);
   }
   @font-face {
       font-family: splash;
       /* Имя шрифта */
       src: url(/fonts/splashRounded.otf);
       /* Путь к файлу со шрифтом */
   }
   @font-face {
       font-family: robotoMedium;
       src: url(/fonts/robotoMedium.ttf);
   }
   @font-face {
       font-family: robotoReg;
       src: url(/fonts/robotoReg.ttf);
   }
   @font-face {
       font-family: roboto;
       src: url(/fonts/roboto.ttf);
   }
   @import url(http://fonts.googleapis.com/css?family=Roboto:400, 500&subset=latin, cyrillic);
   html {
       padding: 0;
       margin: 0;
   }
   body {
       font-family: robotoReg;
       padding: 0;
       margin: 0;
       background-color:#DADFE1
   }
   #content {
       width:100%;
       min-width:998px;
       //width:expression(document.body.clientWidth > 998?'100%' :'998px');
   }
   #otstup {
       height: 15;
   }
   #logo {
       width: 315;
       height: 119;
       background: url('../pic/logo.gif') no-repeat center top;
   }
   #line {
       height: 139;
       width:6;
       background-color:#cc0000;
   }
   #lineb {
       height: 46px;
       background-color:rgb(50, 167, 169);
       margin:0;
       border-left: 47px solid rgb(0, 117, 119);
       color:black;
   }
   #kolaj {
       width: 546;
       height: 141;
       background: url('../pic/kolaj.gif') no-repeat center;
       float: right;
   }
   #decor {
       width: 336;
       height: 144;
       background: url('../pic/decor.gif') no-repeat center;
   }
   #poisk {
       width: 208;
       height: 73;
       background: url('../pic/poisk.gif') no-repeat center;
   }
   #search {
       width: 206;
       height: 72;
       background-color: #cccccc;
   }
   #slogan {
       height: 46px;
       background-color: #33ccff;
       margin:0;
       border-bottom: 4px solid #cc0000;
...

JavaScript

$('#wrapper a').click(function () {
    var tab_id = $(this).attr('id');
    tabClick(tab_id)
});

function tabClick(tab_id) {
    if (tab_id != $('#wrapper a.active').attr('id')) {
        $('#wrapper a').removeClass('active');
        $('#' + tab_id).addClass('active');
        $('#wrapper div').removeClass('active');
        $('#con_' + tab_id).addClass('active');
    }
}