JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="wrapper">
    <div class="pic"><img src="..."/></div>
    <div class="title"><p>Title</p></div>
    <div class="content"><p>Content</p></div>
    <div class="footer"><p>Footer</p></div>
</div>

CSS

.wrapper{
            position: relative;
            float: left;
            width: 1000px;
            height: 200px;
            border: 1px solid #000000;
        }
        .pic{
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .title{
            width: 650px;
            height: 60px;
            background-color: green;
            position: relative;
            left: 350px;
            top:-16px;
        }
        .content{
            width: 650px;
            height: 60px;
            background-color: blue;
            position: relative;
            left: 350px;
            top: -22px;
        }
        .footer{
            width: 650px;
            height: 60px;
            background-color: gold;
            position: relative;
            left: 350px;
            top: -28px;
        }