JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<div id="main-container" class="container-fluid">
  <div id="content">
    <ul id="per-shape-tabs-links-1" class="nav nav-tabs">
      <li><a href="#tabs-view-1" data-toggle="tab" class="subtab" onclick="updateMapSize('view-map1')">Tab 1</a></li>
      <li><a href="#tabs-cods-1" data-toggle="tab" class="subtab" onclick="updateMapSize('cods-map1')">Tab 2</a></li>
    </ul>
      
    <div id="per-shape-tabs-1" class="tab-content">
      <div id="tabs-view-1" class="tab-pane">
        <div class="row-fluid">
          <div class="span12 well well-small">
            <div id="view-map-1" class="map" style="width:100%;height:512px;background-color:#fff"></div>
          </div>
        </div>
      </div>

      <div id="tabs-cods-1" class="tab-pane">
        <div class="row-fluid">
          <div class="span12 well well-small">
            <div id="cods-map-1" class="map" style="width:100%;height:512px;background-color:#fff"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

img .olTileImage{max-width:none;}
.olImageLoadError{display: none !important;}

JavaScript

$(document).ready(function(){
    $('#per-shape-tabs-links-1 a:eq(0)').tab('show');
    renderMaps(1, 'view');
    renderMaps(1, 'cods');
});

var maps = {};

function updateMapSize(id) {
    setTimeout(function(){
        maps[id].updateSize();        
    },0);
};

function renderMaps(shpId, type) {
    shpSrid = "31256";
    shpProj = "+proj=tmerc +lat_0=0 +lon_0=16.33333333333333 +k=1 +x_0=0 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs "
    var layers = [1,2,3,4,6,9,10,12]
    Proj4js.defs["EPSG:"+shpSrid] = shpProj
    var proj = new OpenLayers.Projection("EPSG:"+shpSrid);

    // Enlarge bbox if necessary in order to have a square bbox
    extent = [5000, 217500, 12500, 222500];
    width  = extent[2]-extent[0];
    height = extent[3]-extent[1];
    if (width > height){
        bbox = [extent[0], extent[1]-((width-height)/2), extent[2], extent[3]+((width-height)/2)];
        size = width;
    }
    else if (height > width){
        bbox = [extent[0]-((height-width)/2), extent[1], extent[2]+((height-width)/2), extent[3]];
        size = height;
    }
    else{
        bbox = extent;
        size = width;
    }

    var bounds = new OpenLayers.Bounds(bbox[0],bbox[1],bbox[2],bbox[3]);
    var minZoom = 0;
    var maxZoom = 7;

    maxRes = size/256
    var res  = [maxRes, maxRes/2, maxRes/4, maxRes/8, maxRes/16, maxRes/32, maxRes/64, maxRes/128]

    var map = new OpenLayers.Map({
        div: type+'-map-'+shpId,
        allOverlays: true,
        projection: proj,
        maxExtent: bounds,
        allowSelection: true,
        resolutions: res,
        units: 'm',
        zoomMethod: null
    });
    
    maps[type+'-map'+shpId] = map;

    var totLC;
    $.each(layers,
    function(idx, lyr) {
        layer_dir = lyr.toString() +'_layer'

        var layer = new OpenLayers.Layer.XYZ(
            layer_dir,
            'http://151.8.7.206/media/tiles/'+layer_dir+'/',
            {
               ...