JSFiddle - React, Tailwind, and code Playground

by Mark Kimitch

HTML

<div id="componentTabs" class="tabs2">
    <div id="tabs-1">
        <img alt="" src ="http://dummyimage.com/210x210/878787/ffffff.jpg" />
        <h2>Title 1 Goes Hear</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nisi ac dui feugiat semper at vel justo. Sed commodo neque ac odio ultrices adipiscing. Morbi blandit, erat imperdiet ultrices lobortis, ipsum enim egestas nulla, quis mattis lectus turpis nec sem. Suspendisse ullamcorper ligula in libero cursus eget egestas lacus pulvinar. Sed sed odio felis.</p>
    </div>
    <div id="tabs-2">
        <img alt="" src ="http://dummyimage.com/210x210/878787/ffffff.jpg" />
        <h2>Writing code is awesome</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum consectetur lectus, sit amet sodales diam commodo at. Nunc vel nunc sem, non tempus magna. Morbi ac dolor at felis euismod tincidunt vel ut mi. Donec felis metus, adipiscing et lobortis at, pharetra at turpis. Vivamus molestie tincidunt arcu eget volutpat. Vivamus suscipit tortor eget lorem consequat condimentum et eu orci. Donec et tortor nec eros condimentum egestas vel sed urna. Integer porttitor bibendum dignissim. Nulla in tortor nisi, ut consequat mi. Aliquam fermentum ipsum sit amet urna accumsan ac fermentum odio laoreet. Vivamus nunc turpis, euismod nec iaculis ac, posuere sit amet dolor. Pellentesque ac mauris orci, semper faucibus justo.</p>
    </div>
    <div id="tabs-3">
        <img alt="" src ="http://dummyimage.com/210x210/878787/ffffff.jpg" />
        <h2>Tabbed Components, FTW</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nisi ac dui feugiat semper at vel justo. Sed commodo neque ac odio ultrices adipiscing. Morbi blandit, erat imperdiet ultrices lobortis, ipsum enim egestas nulla, quis mattis lectus turpis nec sem. Suspendisse ullamcorper ligula in libero cursus eget egestas lacus pulvinar. Sed sed odio felis.</p>
        <p>Lorem...

CSS

/***********************************************************************
*  3M.com Corporate CSS v 4.16
*  Copyright (c) 3M 2012. All rights reserved
*  Last Modified: 02/10/2012
*  Asset ID: 1273678822150
*  Author: @US338674 
*  to see unminified version view...

JavaScript

$.fn.equalHeights = function(px) {
    $(this).each(function() {
        var currentTallest = 0;
        $(this).children().each(function(i) {
            if ($(this).height() > currentTallest) {
                currentTallest = $(this).height();
            }
        });
        $(this).children().css('height', currentTallest);
    });
    return this;
};

$('#componentTabs').tabs();
$('#componentTabs').css('height',$(this).height()+'px');
//$('#componentTabs').equalHeights();
$('#componentTabs .ui-tabs-nav li:last-child').css('border-right-width', '1px');
var ulWidth = $('#componentTabs ul.ui-tabs-nav').width();
if ($('#componentTabs .ui-tabs-nav li').length == 3) {
    var liWidth = Math.floor(ulWidth / 3);
    $('#componentTabs .ui-tabs-nav li').css('width', liWidth - 1);
}