JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title></title> 
    
    <link href="css/style2.css" rel="stylesheet" type="text/css" /> 
    <link href="css/style_text.css" rel="stylesheet" type="text/css" /> 
    <link href="css/tabs.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
<body> 
        
<div class="main-vervolg right"> 
    <div class="right"> 
        <div class="bottom"> 
        
            <div class="tabs"> 
                <ul class="tabnav"> 
                    <li class="signledomain"><a href="#tab1"></a></li> 
                    <li class="multidomain"><a href="#tab2"></a></li> 
                    <li class="domeinnaam"><a href="#tab3"></a></li> 
                </ul> 
                
                <div class="panes"> 
                    <div id="tab1"> 
                        <table width="100%"> 
                            <tr> 
                                <td> 
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget
                                    orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non
                                    venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
                                </td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget
                                    orci convallis at posuere leo convallis....

CSS

html, body {
    margin : 0;
    padding : 0;
    background-color : #FFFFFF;
    height : 100%;
}


/* //////////////////// LAYOUT \\\\\\\\\\\\\\\\\\\\ */

img {border : 0;}

.main-vervolg {
    float : left;
    position : relative;
    background-position : left top;
    background-repeat : repeat-y;
    overflow : hidden;
    width : 984px;
}

.main-vervolg.right {
    padding : 0 0 0 2px;
    width : 982px;
}

.main-vervolg .left {
    float : left;
    position : relative;
    padding : 5px 3px 0;
    overflow : hidden;
    width : 249px;
}

.main-vervolg .left.domain {
    padding : 22px 20px 18px;
    padding /*\**/: 22px 20px 18px\9;
    width : 209px;
}

.main-vervolg.right .left .domain {
    position : aboslute;
    background-image : none;
    background-color : transparent;
    border : 1px solid #e3e3e3;
    text-align : center;
    overflow-y : scroll;
    overflow-x : hidden;
    width : 209px;
    height : 172px;
}

.main-vervolg .right {
    float : left;
    position : relative;
    padding : 0 0 18px;
    overflow : hidden;
    width : 727px;
}

.main-vervolg .right .bottom {
    background : none;
    padding : 18px 20px 0;
    overflow : hidden;
    width : 687px;
    height : auto;
}
html,body{
    font-family : Arial;
    color : #1c1c1c;
    font-size : 12px;
    line-height : 18px;
}

a , a:link, a:active, a:visited {
    color : #ff5a00;
    text-decoration : none;
}

a:hover {
    color : #1c1c1c;
    text-decoration : none;
}

@font-face {
    font-family: 'HelveticaLTStdBdCnOb';
    src: url('http://www.dreamwire.nl/klanten/test//text/helveticaltstd-boldcondobl-webfont.eot');
    src: url('http://www.dreamwire.nl/klanten/test//text/helveticaltstd-boldcondobl-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.dreamwire.nl/klanten/test//text/helveticaltstd-boldcondobl-webfont.woff') format('woff'),
         url('http://www.dreamwire.nl/klanten/test//text/helveticaltstd-boldcondobl-webfont.ttf')...

JavaScript

$(".multidomain a").click(function() {
        $(".main-vervolg.right .left .domain").animate({ height: '287px'}, 400).css('overflow-y','scroll');
    });
    
    $(".signledomain a").click(function() {
        $(".main-vervolg.right .left .domain").animate({ height: '172px'}, 650).css('overflow-y','scroll');
    });
    
    $(".domeinnaam a").click(function() {
        $(".main-vervolg.right .left .domain").animate({ height: '464px'}, 650).css('overflow-y','scroll');
    });
    
    // PRODUCTEN TABS
    $('.tabs > ul').tabs({ fx: {  opacity: 'toggle' } });