JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div id ="outer-box">
    <div id="inner-box-1">
        <div class="user_image"></div>
        </div>

    <div id="inner-box-2">
        <div class="header"></div>
        <div class="dashboard_main_menu_holder"></div>
        <div class="dashboard_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean risus leo, interdum vehicula posuere vel, fermentum sit amet enim. Integer egestas malesuada risus ut pellentesque. Cras ac ligula a mi condimentum vulputate et commodo libero. In hac habitasse platea dictumst. Suspendisse pretium velit nibh, sit amet vehicula orci fermentum vitae. Donec id euismod orci, sit amet consequat eros. Phasellus adipiscing suscipit leo vitae placerat. Fusce ut risus sed lorem facilisis sodales. Phasellus et luctus mauris, ac semper urna. Vivamus blandit cursus erat. Nunc semper enim erat, at pellentesque est laoreet non.

Sed sagittis ac elit non iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec lacus orci. Ut a aliquet erat, non molestie elit. Ut vulputate ac nunc eu dignissim. Proin placerat dui ac gravida lacinia. Suspendisse ac lorem massa. Integer sed fermentum augue. Sed in enim commodo, sagittis est ut, cursus nulla. Donec condimentum euismod nisl, luctus cursus mauris vestibulum ut. Aenean ac elit ultrices, pretium libero ac, dapibus augue. Vivamus dignissim eros dui, id placerat est condimentum a. Cras ullamcorper felis nec elit rhoncus sagittis.

Integer lobortis molestie ipsum, a scelerisque lorem placerat a. Mauris pulvinar facilisis sapien, placerat viverra libero tempus vel. Nulla facilisi. Phasellus ac metus quis eros porta porttitor id non est. Sed eu diam non nisl faucibus feugiat. Donec mi purus, semper facilisis fermentum vitae, auctor sed ante. Praesent condimentum dolor dolor, vitae dictum massa tempor a. Nullam porttitor magna id tortor tempus fringilla.

Vivamus id elementum magna, a semper nunc. Nulla facilisi. Curabitur nunc leo,...

CSS

#outer-box {
    width:100%;
    height: 100%;
    position: relative;
    overflow: auto;
    float: right;
}

#inner-box-1 {
    width: 225px;
    height: 100%;
    background-color:#253740;
    float:right;
}

#inner-box-2 {
   height: 100%;
   direction: rtl;
   overflow:auto;
   *overflow: inherit;
}

.header {
    width: 100%;
    height: 100px;
    background: url('imgs/pattern.jpg') repeat-x;
}

.dashboard_main_menu_holder {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
}

.dashboard_content {
    text-align: justify;
    overflow: hidden;
}