JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<div class="categories">
    <div class="blocks red">
        <h2>Title 1</h2>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
    </div>
    <div class="blocks blue">
        <h2>Title 2</h2>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
    </div>
    <div class="blocks news">
        <h2>Title 3</h2>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
        <p>contents contents contents</p>
    </div>
</div>

CSS

.categories {
    border: 1px solid green;
    overflow:hidden;
}
.blocks {
    border: 1px solid blue;
    float:left;
    width: 30%;
    margin: 1%;
}
.blue h2 {
    color: pink;
}
.red h2 {
    background: #ccc;
}
.news h2 {
    border: 1px solid grey;
}
}