JSFiddle - React, Tailwind, and code Playground

by Mihai_T

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div class="item-container">

    <div class="item-block">
        <div><img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image"></div>
        <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
    </div>

    <div class="item-block">
        <div><img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"></div>
        <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
    </div>

    <div class="item-block">
        <div><img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"></div>
        <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
    </div>

    <div class="item-block">
        <div><img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image"></div>
        <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
    </div>

    <div class="item-block">
        <div><img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"></div>
        <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
    </div>

    <div class="item-block">
        <div><img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image"></div>
        <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
    </div>

...

CSS

.item-container {
    max-width: 90%;
    display: table;
    border: 4px double #d9d9d9;
    border-radius: 5px;
    margin: auto;
}

.item-block {
    border: solid lightgray 1px;
    border-radius: 10px;
    width: 230px;
    float:left;
    padding: 5px;
    margin: 3px;
}

.item-image {
    padding-top: 2px;
    width: 220px;
    height: 220px;
}

.item-text {
    font-size: 14px;
    color: #666666;
    text-align: justify;
}

JavaScript

$(document).ready(function(){

    var highest = 0;
        $('.item-block').each(function(){  
                if($(this).height() > highest){  
                highest = $(this).height();  
        }
    });    
    $('.item-block').height(highest);

});