JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form id="form1" runat="server">
 
        <div id="wrap">
            <div class="top_corner">
 
            </div>
            <div id="main_container">
                <div id="header">
                    <div id="logo">
                        TADY BUDE LOGO
                    </div>
                    <div id="menu">
                        Tude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENU
                    </div>
                </div>
                <div class="middle_banner">
                    <div class="featured_slider">
<!-- začátek slide banneru -->
                        <div id="featured_border" class="jcarousel-container">
                            <div id="featured_wrapper" class="jcarousel-clip">
                                <ul id="featured_images" class="jcarousel-list">
                                <li><img src="images/slider_photo.jpg" alt="" height="280" width="965" /></li>
                                <li><img src="images/slider_photo2.jpg" alt="" height="280" width="965" /></li>
                                <li><img src="images/slider_photo3.jpg" alt="" height="280" width="965" /></li>
                                <li><img src="images/slider_photo2.jpg" alt="" height="280" width="965" /></li>
                                </ul>
                            </div>
                            <div id="featured_positioner_desc" class="jcarousel-container">
                                <div id="featured_wrapper_desc" class="jcarousel-clip">
                                    <ul id="featured_desc" class="jcarousel-list">
                                    </ul>
                                </div>
                            </div>
                            <ul id="featured_buttons" class="clear_fix">
                                <li>1</li>
                                <li>2</li>
         ...

CSS

body {
background:url(images/bg.gif) repeat;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
}
p{
text-align:justify;
line-height:19px;
padding:0px;
margin:0px;
}
h2{
padding:0px 0 10px 0; margin:0px; color:#B52025; font-size:20px; font-weight:normal;
}
 
#wrap{
width:977px;
margin:auto auto auto auto;
}
.top_corner{
width:976px;
height:15px;
background:url(images/top_bg.gif) no-repeat center bottom;
}
#main_container{
width:977px;
background:url(images/center_bg_repeat.gif) repeat-y center;
}
#header{
width:960px;
margin:auto;
height:90px;
}
#logo{
padding:10px 0 0 20px;
float:left;
}
/*----------------------menu-------------------------*/
#menu{
width:530px;
float:right;
padding:40px 0 0 0;
}
 
 
/*-----------------middle_banner----------------------------*/
.middle_banner{
width:977px;
height:304px;
background:url(images/middle_banner_bg.gif) no-repeat center;
}
/*----------------------slider---------------------------*/
.featured_slider { width:965px; margin:auto; float:left; margin:18px 0 0 6px; }
ul, li{
padding:0px;
margin:0px;
list-style:none;
}
/** ----------------------------------------------------- **/
#featured_border { position: relative; border: none; padding:0px; height:280px; margin: 0px; }
#featured_wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
#featured_images { position: absolute; left: 0; top: 0; }
#featured_images li { float: left; }
#featured_positioner_desc { width:965px; height: 280px; position: absolute; top: 0px; left: 0px; }
#featured_wrapper_desc { width: 100%; height:280px; position: relative; overflow: hidden; }
#featured_desc { position: absolute; left: 0; bottom: 0;  padding:0px; margin:0px; }
#featured_desc li { width: 965px; float: left;padding:0px; margin:0px; }
#featured_desc li div { margin:0px 0 0px 0px; padding:10px; width:945px;  background: url(images/featured-desc-bg.png); }
#featured_desc li h2 {
color:#FFFFFF;
font-size:18px;
padding:0px 0...