JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="ThisMyBox" >
    
    Tekstiä 1
    
</div>
<div class="mySB" >
    
    Tekstiä 2
    
</div>

<div class="ThisMyBox" style=" width: 300px; height: 200px; ">
    
    Tekstiä 1
    
</div>
<div class="mySB2" >
    
    Tekstiä 2
    
</div>

CSS

.SBwrap {
    position: relative;
    display: inline-block;
    
    box-shadow: 0px 0px 4px #666;
    
    margin: 50px;
    color: #fff;
}

.SBiwrap1 {
    overflow: hidden;
}

.SBiwrap1,
.SBiwrap2 {
    float: left;
    position: relative;
}

.SBwrap .toggle {
    float: left;
    position: absolute;
    z-index: 20;
    right: 0px;
    bottom: -25px;
    height: 25px;
    line-height: 25px;
    padding: 0px 5px;
    font-size: 12px;
    font-family: "Arial", sans-serif;
    border-radius: 0px 0px 6px 6px;
    background: #333;
}


.SB_primary {
    position:relative;
    z-index: 1;
    float: left;
    

background: #a90329;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5MDMyOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhmMDIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDAwMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329',...

JavaScript

(function($){
    $.fn.extend({
        SB: function(options) {
 
            var defaults = {
                init: 'hover', // click, hover
                toggleClass: 'toggle',
                toggleText1: null,
                toggleText2: null,
                slide: 'down',
                forceHeight: true // If secondary box height is bigger, use that height.
            };
             
            var options = $.extend( defaults, options);
            
            return this.each(function() {
                  var obj = $(this), // Secondary box
                      objD = obj.data(), // Checks for data set to Secondary box
                      objPrev = obj.prev(), // Previous element should always be the primary box.
                      o = $.extend( true, {}, options, objD );

                
                    obj.addClass('SB_box SB_secondary');

                    objPrev
                        .addClass('SB_box SB_primary')
                        .andSelf().wrapAll( '<div class="SBwrap"><div class="SBiwrap1"><div class="SBiwrap2"></div></div></div>' );
                    
                    var SBwrap = obj.parents('.SBwrap');
                
                    if ( o.toggleText1 ) {
                        $('<div class="'+ o.toggleClass +'">'+ o.toggleText1 +'</div>').appendTo( SBwrap );
                    }
                   
                    var toggle = $('.'+o.toggleClass, SBwrap),
                        globalH = objPrev.outerHeight(true);
                
                
                    var SBiwrap1 = $('.SBiwrap1', SBwrap),
                        SBiwrap2 = $('.SBiwrap2', SBwrap),
                        
                        SBwidth1 = SBiwrap2.width(),
                        SBwidth2 = objPrev.width(),
                        
                        wrapiwrap = SBwrap.add( SBiwrap1 );
                    
                    wrapiwrap.height( globalH )
                    obj.height( objPrev.height()...