JSFiddle - React, Tailwind, and code Playground

by Raghu Raman

HTML

<div class= "parent">
    <div class= "left">
        <div class= "image"> Image
        </div>
        <div class= "works"> Works
        </div>
        <div class= "share"> Share
        </div>
    </div>
    <div class= "right">
        <div class= "details"> 
            <div>Author Name</div>
            <div>Author Title</div>
            <div class= "info">
               <table>
                   <tr> 
                       <td> Location </td> 
                       <td> New Delhi </td> 
                   </tr>
                   <tr> 
                       <td> Language(s) </td> 
                       <td> Hindi </td> 
                   </tr>
                   <tr> 
                       <td> Website </td> 
                       <td> Google </td> 
                   </tr>
                   <tr> 
                       <td> Member Since </td> 
                       <td> June 2015 </td> 
                   </tr>
                </table>
            </div>
        </div>
        <div class= "app"> Mobile App
        </div> 
        <div class= "summary"> 
            <div class= "heading"> About the Author <div>
             <div class= "content"> Summary </div>
        </div>
    </div>
</div>

CSS

.parent{
    position: relative;
}
.left{
    display: inline_block;
    float:left;
    background-color: red;
    height: 300px;
    width: 30%;
    position: static;
}

.right{
    display: block;
    background-color: yellow;
    height: 300px;
    width: auto;
}
.image{
    margin: 0 auto;
    width: 75%;
    height: 60%;
    background-color: #949232;
}
.works{
    margin: 0 auto;
    width: 75%;
    height: 17%;
    background-color: white;
}
.share{
    margin: 0 auto;
    width: 75%;
    height: 23%;
    background-color: #0022fe;
}
.details{
    display: inline_block;
    float:left;
    background-color: #fe0da7;
    height: 60%;
    width: 50%;
    position: static;
}
.app{
    display: block;
    background-color: #03efd4;
    height: 60%;
    width: auto; 
}
.info{
    position: static;
    width: auto;
    height: 144px;
    background-color: violet;
        
}