JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <img class="arrow2" src="images/Arrow2.png" alt="Arrow2"/>
    <header>
        <div class="head">
        <img src="images/CloneMobile.png" alt="CloneMobile"/>
        <p class="logo">CloneMobile</p>
        <img class="arrow" src="images/Arrow1.png" alt="Arrow"/>
        </div>
    </header>
    <div class="line"></div>
    <nav>
        <ul class="main">
            <li><a href="#">Главная</a></li>
            <li><a href="#">Мобильные новинки</a></li>
            <li><a href="#">Форум</a></li>
            <li><a href="#">FM-радио</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </nav>
    <div class="maincont">
        <div class="sidebar">
            <aside class="first">
                <h1>Навигация</h1>
                <ul>
                    <li><a href="#">Игры</a></li>
                    <li><a href="#">Программы</a></li>
                    <li><a href="#">Темы и обои</a></li>
                    <li><a href="#">Смартфоны</a></li>
                    <li><a href="#">GPS навигаторы</a></li>
                    <li><a href="#">MP3 плееры</a></li>
                    <li><a href="#">Bluetooth гарнитуры</a></li>
                    <li><a href="#">Разное</a></li>
                </ul>
            </aside>
            <aside class="second">
                <a href="#"><img src="images/Register.png" alt="Register"/></a>
            </aside>
            <aside></aside>
        </div>
        <main>
            
        </main>
    </div>
    <footer>
        sdfsadfwfweeagf
    </footer>
    <script src="libs/html5shiv/es5-shim.min.js"></script>
    <script src="libs/html5shiv/html5shiv.min.js"></script>
    <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
    <script src="libs/respond/respond.min.js"></script>
</body>

CSS

body {
    position: absolute;
    background-image: url(../images/Design.png);
    margin: 0;
    padding: 0;
    width: 80vw;
}
header, footer, nav, article {
    display: block;
}
header {
    width: 100%;
    position: relative;
    display: block;
    height: 90px;
    background-color: #fff;
    padding-right: 240px;
}
.head img {
    position: relative;
    height: 60px;
    top: 15px;
    left: 170px;
}
p.logo {
    position: relative;
    margin: 0;
    left: 240px;
    bottom: 35px;
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
}
img.arrow {
    height: 117px;
    left: 900px;
    position: absolute;
    top: 0;
}
img.arrow2 {
    height: 117px;
    left: 860px;
    position: absolute;
    top: 0;
}
.line {
    height: 3px;
    min-width: 100%;
    width: 100%;
    background-color: #9F9FA1;
     padding-right: 240px;
}
nav {
    height: 72px;
    width: 1000px;
    transform: translateX(145px);
    margin: 0 5px 5px;

}
.main li {
    display: inline;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
.main li a {
    padding: 15px 25px;
    text-decoration: none;
    color: #070707;
    transition: border-radius 0.5s, background-color 0.5s, color 0.5s;
}
.main li a:hover {
    color: #070DFD;
    background-color: #AECCE5;
    border-radius: 3px;
}
ul.main {
    margin: 0;
    padding-top: 28.5px;
    padding-bottom: 28.5px;
    padding-left: 30px;

}
.maincont {
    height: 100%;
    width: 1000px;
    background-image: linear-gradient(to bottom, #F3F6F8, #D4E5F3) ;
    box-shadow: 3px 3px 3px #7F7C7C;
    transform: translateX(150px);
    padding-top: 9px;
    border-radius: 5px;
}
.sidebar {
    width: 250px;
    margin: 0;
    height: 100%
    border-right: 1px solid #8C8B8B;
}
aside.first {
    width: 100%;
    height: 470px;
}
.first h1 {
    margin: 21px 0 20px 20px;
    text-transform: uppercase;
    font-size: 21px;
    color: #1A62F6;
    font-family: Arial, Helvetica,...