JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<body>
        <div id="all">
            <div id="Header">
                <p class="vladik">Blog template</p>
            </div>
            <div id="Sidebar">
                    <div id="About-me">
                        <p class="cite">About me</p>
                        <hr>
                        <img src="img/Layer-29.png" class="Page1">
                        <p class="er">Lorem Impsum dolor sit amet,</p>
                        <p class="er">consectetur adiplisicing ellit, sed</p>
                        <p class="er">do eiusmod tempor incididunt ut</p>
                        <p class="er">labore et dolore magna aliwua. Ut</p>
                        <p class="er">enlm ad minim velniam, quis trud</p>
                        <p class="er">exercitation ullamco laboris nisi.</p>
                        <hr>
                    </div>
                    <div id="Subscribe">
                        <p class="you">Subscribe</p>
                        <hr class="op">
                        <img class="lik" src="img/Sub.png"></img>
                        <p class="utka">Recent Articles</p>
                        <hr class="op">
                        <img class="lik" src="img/Sub.png"></img>
                        <p class="utka">Recent comments</p>
                        <hr class="op">
                    </div>
                    <div id="Categories">
                        <p class="jok">Categories</p>
                        <hr>
                        <ul>
                            <li>General</li>
                            <p class="rt">12 articles</p>
                            <hr>
                            <li>Fame</li>
                            <p class="rt">3 articles</p>
                            <hr>
                            <li>PR</li>
                            <p class="rt">4 articles</p>
                            <hr>
                            <li>Blogs</li>
                            <p class="rt">2...

CSS

body{
    margin: 0px;
    top: 0;
    padding: 0px;
    background-color:red;
}
p{
    margin: 0;
    font-family: Myriad Pro;
}
#Header{
    height: 187px;
    background-image: URL(img/Layer-1.png);
    padding-bottom: 10px;
}
#all{
    width: 1000px;
    max-width:100%;
    margin: 0 auto;
    padding: 0;
        background-color: rgb(45,56,68);
}
#Sidebar{
    float: right; 
    width: 280px;
    top: 0;
    right: 0;
    padding-top: 37px;
    padding-right: 124px;
}
p.cite {
    color: #ede9dc;
    font-size: 20px;
}
hr{
    color: RGB(65,74,83);
    background-color: RGB(65,74,83);
    border: none;
    height: 2px;
}
p.er{
    font-size: 11px;
    color: #ede9dc;
    font-style: Regular;
    padding-bottom: 7px;
}
img.Page1 {
    float: left;
    margin-right: 9px;
}
#About-me{
    float: bottom;
}
p.you{
    font-size: 20px;
    padding-top: 30px;
    color: #ede9dc;
}
p.utka{
    size: 13px;
    color: #ede9dc;
}
img.lik{
    float: left;
    padding-right: 9px;
}
p.jok{
    font-size: 20px;
    padding-top: 30px;
    color: #ede9dc;
}
li{
    float: left;
    color: #ede9dc;
    font-size: 13px;
    text-align: left;
 
}
p.rt{
    text-align: right;
    color: #ede9dc;
    font-size: 13px;
}
p.vladik{
    font-size: 33px;
    color: #ffffff;
    padding-left: 82px;
    padding-top: 76px;
}
#Content{
    background-image: URL(img/Back2.png);
    height: 930px;
    width: 600px;
    margin-top: 17px;
    margin-left: 90px;
}
img.jan{
    padding-left: 11px;
    padding-top: 11px;
    float: left;
    padding-right: 16px;
}
h4{
    font-size: 22px;
    font-style: Regular;
    color: #2d3844;
    padding-top: 8px;
    float: bottom;
}
p.bot1{
    font-size: 13px;
    font-family: "Myriad Pro";
     color: rgba( 0, 0, 0, 0.302 );
    line-height: 1.385;
    text-align: left;
    position: absolute;
    left: 135px;
    top: 265px;
}