JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="grid">
    <div class="grid-item sidebar" style="background-image: url('https://carepharmaceuticals.com.au/wp-content/uploads/sites/19/2018/02/placeholder-600x400.png'); background-position: center;"></div>
    <div class="grid-item image" style="background-image: url('https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image'); background-position: center;"></div>
    <div class="grid-item content">
        <h1>My title here</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil placeat dolore cumque iste? Repellat dolorem aspernatur eaque, rerum iste error nemo voluptates esse blanditiis necessitatibus praesentium accusamus ratione, sequi ipsa!</p>
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil placeat dolore cumque iste? Repellat dolorem aspernatur eaque, rerum iste error nemo voluptates esse blanditiis necessitatibus praesentium accusamus ratione, sequi ipsa!</p>
         
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil placeat dolore cumque iste? Repellat dolorem aspernatur eaque, rerum iste error nemo voluptates esse blanditiis necessitatibus praesentium accusamus ratione, sequi ipsa!</p>
    </div>
    <div class="grid-item menu"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid {
    display: grid;
    grid-template-columns: 150px 150px 150px auto auto auto 50px;
    grid-template-rows: 75px 300px 75px;
}

.sidebar {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    background: #212121;
}

.image {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #424242;
}

.menu {
    grid-column-start: 7;
    grid-column-end: 8;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #ffca12;
}

.content {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 3;
    padding: 30px;
}