JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
    <ul id="left-sidebar">
        <li>
            Левый сайдбар
            Текст левого сайд бара
        </li>
        <li>
            Левый сайдбар
            Текст левого сайд бара
        </li>
    </ul>
    <ul id="right-sidebar">
        <li>
            Правый сайдбар
            Текст правого сайдбара
        </li>
        <li>
            Правый сайдбар
            Текст правого сайдбара
        </li>
    </ul>
    <div id="content">
        <div id="breadcrumbs">
        </div>
        <div class="pagelist">
        </div>
    
        <div class='cn-content'>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
        </div>
        <div class='cn-content'>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
            <p> content </p>
        </div>
        <div class="pagelist">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div id="footer">
    <div id="footer-wrap">
        <ul id="bottom-menu">
            <li><a href='#'>Туры</a></li>
            <li><a href='#'>Отели</a></li>
            <li><a href='#'>Рекомендации</a></li>
            <li><a href='#'>Аренда авто</a></li>
            <li><a href='#'>Забронировать</a></li>
        </ul>
        <div class="clear"></div>
    </div>

</div>

CSS

/* BODY */
#body {
}
/********************************/

/* LEFT-SIDEBAR */
#left-sidebar {
    float: left;
    margin: 0px 10px 10px 10px;
    width: 275px;
}
/********************************/

/* RIGHT-SIDEBAR */
#right-sidebar {
    float: right;
    margin: 0px 10px 10px 10px;
    width: 275px;
}

#right-sidebar li, #left-sidebar li, #content .cn-content{
    background-color: #e5f7ed;
    border: 8px solid black;
    margin-bottom: 10px;
    padding: 5px;
    border: 5px solid #e5f7ed;
    -moz-border-bottom-colors: #fafdfc #f2fbf2 #ecfaf2 #eaf8f2 #e7f8ee #e5f7ed ;
    -moz-border-top-colors: #fafdfc #f2fbf2 #ecfaf2 #eaf8f2 #e7f8ee #e5f7ed ;
    -moz-border-left-colors: #fafdfc #f2fbf2 #ecfaf2 #eaf8f2 #e7f8ee #e5f7ed ;
    -moz-border-right-colors: #fafdfc #f2fbf2 #ecfaf2 #eaf8f2 #e7f8ee #e5f7ed ;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px;
}
/********************************/

/* CONTENT */
#content {
    overflow: hidden;
    margin: 10px auto;
}
/************************************/

/* FOOTER */
#footer {
    padding: 10px 25px;
    background-color: red;
}
/*****************************************************************/