JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div class="grid">
    <div class="block block_a">
        <div class="content"></div>
    </div>
    <div class="block block_a"></div>
    <div class="button"> button </div>   
</div>

CSS

.button, .block_a, .block_b, .grid, .content{
    border:3px solid;
    margin:2px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px; 
}

.grid{
    width:364px;
    height:380px;
}
.block{
    height:370px;
    width:170px;
    position:relative;
    float:left;
    border-color:#ccc;
}
.content{
width:160px;
    height:360px;
    border-color: orange;
}
.button{
    position:absolute;
    width: 190px;
    height:40px;
    border-color:red;
    text-align:center;
    line-height:34px;
    font-size:30px;
    top:170px;
    left:110px;
}

JavaScript

var btn = $('.button');
btn.css('-webkit-transform','rotate(90deg)');
btn.css('-moz-transform','rotate(90deg)');
btn.css('transform','rotate(90deg)'); 

if($.browser.msie && $.browser.version<="8.0"){
    btn.css({
        filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)',
        top:'100px',
        left: '184px'   
    });    
}